如何使用Ant Design制作响应式网格？

Question

• 我尝试遵循这个文档，但我不能让它工作。
• 我希望在小屏幕上将方框分成一列，就像下面的示例一样。

变成

我是否需要使用CSS替代默认组件？

- D0rm1nd0

Answer 1

使用此代码：

import 'antd/dist/antd.css';
import { Row, Col } from 'antd';

  <Row>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
  </Row>

或者：

  <div className="ant-row">
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
  </div>

- Fatemeh Qasemkhani

---

注意，xs={24}是xs={{ span: 24 }}的简写形式。因此，如果您还想根据屏幕比例更改列的顺序，您可以这样做，例如 <Col xs={{ span: 24, order: 2 }} xl={{ span: 8, order: 1 }}>. - Jacob van Lingen

Answer 2

请滚动到您发布的 Grid 文档的最后一个部分：

<div nz-row>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">Col</div>
  <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">Col</div>
  <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">Col</div>
</div>

考虑到蚂蚁行可以包含24列，并且您在帖子中提到了Bootstrap（这涉及大小：xs、sm、md等），我相信您可以调整其他所有内容。

- Bullsized