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

Question

我尝试遵循此 documentation，但我做不到。
我想让方框在小屏幕上分成一列，就像下面的例子一样。

进入

我必须使用 css 代替默认组件吗？

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>

Answer 2

向下滚动到您post编辑的网格文档的最后一部分：

<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 列，并且您在 post 中提到了 Bootstrap（这是关于大小：xs、sm、md 等）- 我相信您可以调整其他一切。

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

How to make a responsive grid, using Ant Design?

css

responsive-design

antd