ant-design/components/card/demo/in-column.md

35 lines
709 B
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
2016-04-10 15:38:52 +08:00
order: 4
title:
zh-CN: 栅格卡片
en-US: Card in column
2016-03-31 09:40:55 +08:00
---
2016-02-20 16:40:18 +08:00
## zh-CN
2016-02-20 16:40:18 +08:00
在系统概览页面常常和栅格进行配合。
## en-US
Cards usually cooperate with grid column layout in overview page.
2017-02-13 10:55:53 +08:00
````jsx
2016-02-20 16:40:18 +08:00
import { Card, Col, Row } from 'antd';
ReactDOM.render(
2016-04-10 15:38:52 +08:00
<div style={{ background: '#ECECEC', padding: '30px' }}>
2017-06-15 15:34:47 +08:00
<Row gutter={16}>
<Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card>
2016-04-10 15:38:52 +08:00
</Col>
2017-06-15 15:34:47 +08:00
<Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card>
2016-04-10 15:38:52 +08:00
</Col>
2017-06-15 15:34:47 +08:00
<Col span={8}>
<Card title="Card title" bordered={false}>Card content</Card>
2016-04-10 15:38:52 +08:00
</Col>
</Row>
2018-06-27 15:55:04 +08:00
</div>,
mountNode);
2016-02-20 16:40:18 +08:00
````