mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
1.1 KiB
1.1 KiB
order | title | ||||
---|---|---|---|---|---|
1 |
|
zh-CN
栅格常常需要和间隔进行配合,你可以使用 Row
的 gutter
属性,我们推荐使用 (16+8n)px
作为栅格间隔。(n 是自然数)
en-US
You can use the gutter
property of Row
as grid spacing, we recommend set it to (16 + 8n) px
. (n
stands for natural number.)
import { Row, Col } from 'antd';
ReactDOM.render(
<div className="gutter-example">
<Row gutter={16}>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box">col-6</div>
</Col>
</Row>
</div>
, mountNode);
.gutter-example .ant-row > div {
background: transparent;
border: 0;
}
.gutter-box {
background: #00A0E9;
padding: 5px 0;
}