web-dev-qa-db-ja.com

Ant Designを使用して、レスポンシブグリッドを作る方法は？

  • 私はこれに従うことを試みます ドキュメンテーション しかし、私はこの仕事をすることはできません。
  • 以下の例のように、ボックスを小さな画面のために1つの列に分割したいです。

enter image description hereenter image description here

デフォルトコンポーネントのCSSを使用する必要がありますか？

cssangularresponsive-designantd
8
D0rm1nd0

このコードを使用してください。

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>
 _
2
Fatemeh Qasemkhani