ant-design/components/layout/demo/basic.md

44 lines
889 B
Markdown
Raw Normal View History

2015-06-18 15:26:29 +08:00
# 基础布局
2015-06-09 18:22:52 +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
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>
<Row className="testRowClassName">
2015-10-27 23:52:17 +08:00
<Col span="8">.col-8</Col>
<Col span="8">.col-8</Col>
<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>,
document.getElementById('components-layout-demo-basic')
);
````
<style>
.testRowClassName {
background: #f0f0f0;
}
div.testColClassName {
background: rgba(24, 115, 216, 0.9);
}
</style>