ant-design/components/grid/demo/responsive.md

28 lines
661 B
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 7
title:
zh-CN: 响应式布局
en-US: Responsive
2016-03-31 09:40:55 +08:00
---
2016-03-07 21:03:17 +08:00
## zh-CN
参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries),预设六个响应尺寸:`xs` `sm` `md` `lg` `xl`  `xxl`
2016-03-07 21:03:17 +08:00
## en-US
Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl`.
2017-02-13 10:55:53 +08:00
````jsx
2016-03-07 21:03:17 +08:00
import { Row, Col } from 'antd';
ReactDOM.render(
<Row>
<Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
<Col xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col>
<Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
2018-06-27 15:55:04 +08:00
</Row>,
2018-11-28 15:00:03 +08:00
mountNode
);
2016-03-07 21:03:17 +08:00
````