web-dev-qa-db-fra.com

Comment faire une grille réactive, à l'aide d'Ant Design?

  • J'essaie de suivre ceci Documentation , mais je ne peux pas faire ce travail.
  • Je veux que les boîtes se décomposent dans une colonne pour les petits écrans, comme les exemples suivants.

enter image description here dans enter image description here

Dois-je utiliser CSS installé des composants par défaut?

cssangularresponsive-designantd
8
D0rm1nd0

Utilisez ce code:

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>

ou alors:

  <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