2015-06-18 15:26:29 +08:00
|
|
|
|
# 基础布局
|
2015-06-09 18:22:52 +08:00
|
|
|
|
|
2015-10-28 20:55:49 +08:00
|
|
|
|
- order: 1
|
2015-06-09 18:22:52 +08:00
|
|
|
|
|
2015-06-15 17:46:42 +08:00
|
|
|
|
从堆叠到水平排列。
|
2015-06-09 18:22:52 +08:00
|
|
|
|
|
2015-06-15 17:46:42 +08:00
|
|
|
|
使用单一的一组 `.col-*` 栅格类,就可以创建一个基本的栅格系统,所有列(column)必须放在 `.row` 内。
|
2015-06-09 18:22:52 +08:00
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2015-10-27 23:52:17 +08:00
|
|
|
|
````jsx
|
2015-10-28 20:55:49 +08:00
|
|
|
|
import { Row, Col } from 'antd';
|
2015-10-27 23:52:17 +08:00
|
|
|
|
|
|
|
|
|
ReactDOM.render(
|
|
|
|
|
<div>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span="12">.col-12</Col>
|
|
|
|
|
<Col span="12">.col-12</Col>
|
|
|
|
|
</Row>
|
2015-10-28 18:04:56 +08:00
|
|
|
|
<Row className="testRowClassName">
|
2015-10-27 23:52:17 +08:00
|
|
|
|
<Col span="8">.col-8</Col>
|
|
|
|
|
<Col span="8">.col-8</Col>
|
2015-10-28 18:04:56 +08:00
|
|
|
|
<Col span="8" className="testColClassName">.col-8</Col>
|
2015-10-27 23:52:17 +08:00
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span="6">.col-6</Col>
|
|
|
|
|
<Col span="6">.col-6</Col>
|
|
|
|
|
<Col span="6">.col-6</Col>
|
|
|
|
|
<Col span="6">.col-6</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</div>,
|
2015-12-29 12:08:58 +08:00
|
|
|
|
mountNode
|
2015-10-27 23:52:17 +08:00
|
|
|
|
);
|
2015-10-28 18:04:56 +08:00
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.testRowClassName {
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
div.testColClassName {
|
|
|
|
|
background: rgba(24, 115, 216, 0.9);
|
|
|
|
|
}
|
2015-10-28 20:55:49 +08:00
|
|
|
|
</style>
|