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

【问题标题】：How to make a responsive grid, using Ant Design?如何使用 Ant Design 制作响应式网格？
【发布时间】：2022-01-15 21:59:36
【问题描述】：

我尝试关注这个documentation，但我做不到。
我想让这些框分成一列用于小屏幕，就像下面的示例一样。

进入

我必须使用默认组件的 css insted 吗？

【问题讨论】：

标签： css responsive-design antd

【解决方案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。这节省了我的一天:)
注意xs={24} 是xs={{ span: 24 }} 的快捷方式。因此，如果您还想根据屏幕比例更改列的顺序，您可以执行诸如 <Col xs={{ span: 24, order: 2 }} xl={{ span: 8, order: 1}}> 之类的操作

【解决方案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>

请记住，ant 行可以包含 24 个列，并且您在帖子中提到了 Bootstrap（这是关于尺寸：xs、sm、md 等）-我相信您可以调整其他所有内容。

【讨论】：