mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
90 lines
1.8 KiB
Plaintext
90 lines
1.8 KiB
Plaintext
---
|
|
title: "列"
|
|
description: "使用 columns 组件将卡片和其他组件排列在响应式多列网格布局中，支持自定义列数。"
|
|
keywords: ['卡片分组', '网格布局', '多列布局']
|
|
boost: 3
|
|
---
|
|
|
|
`Columns` 组件用于在响应式网格布局中排列内容。它通常通过指定网格列数，将卡片排成网格。你还可以使用 `Column` 子组件来包裹任意内容。列是响应式的，并会在小屏幕上自动调整布局。
|
|
|
|
<Columns cols={2}>
|
|
<Card title="快速开始" icon="rocket">
|
|
使用我们的快速入门指南配置你的项目。
|
|
</Card>
|
|
|
|
<Card title="API 参考" icon="code">
|
|
浏览你的 API 的端点、参数和示例。
|
|
</Card>
|
|
</Columns>
|
|
|
|
```mdx Columns example
|
|
<Columns cols={2}>
|
|
<Card title="Get started">
|
|
Set up your project with our quickstart guide.
|
|
</Card>
|
|
<Card title="API reference">
|
|
Explore endpoints, parameters, and examples for your API.
|
|
</Card>
|
|
</Columns>
|
|
```
|
|
|
|
<div id="column-sub-component">
|
|
## Column 子组件
|
|
</div>
|
|
|
|
使用 `Column` 组件在单独的列中包裹文本或代码。当你想要并排显示任意内容，而不仅仅是卡片或其他组件时，这非常有用。
|
|
|
|
<Columns cols={2}>
|
|
<Column>
|
|
|
|
**Installation**
|
|
|
|
```bash
|
|
npm install my-package
|
|
```
|
|
|
|
</Column>
|
|
<Column>
|
|
|
|
**Usage**
|
|
|
|
```javascript
|
|
import { init } from 'my-package';
|
|
init();
|
|
```
|
|
|
|
</Column>
|
|
</Columns>
|
|
|
|
````mdx Column sub-component example
|
|
<Columns cols={2}>
|
|
<Column>
|
|
|
|
**Installation**
|
|
|
|
```bash
|
|
npm install my-package
|
|
```
|
|
|
|
</Column>
|
|
<Column>
|
|
|
|
**Usage**
|
|
|
|
```javascript
|
|
import { init } from 'my-package';
|
|
init();
|
|
```
|
|
|
|
</Column>
|
|
</Columns>
|
|
````
|
|
|
|
<div id="properties">
|
|
## 属性
|
|
</div>
|
|
|
|
<ResponseField name="cols" type="number" default={2}>
|
|
每行包含的列数。可接受的值范围为 1 到 4。
|
|
</ResponseField>
|