Ant Design React. Bootstrap Grid концепция "контейнер"

Question

Есть ли в Ant Design для React концепция "контейнера" Bootstrap Grid?

Контейнеры являются самым основным элементом макета в Bootstrap и требуются при использовании нашей сеточной системы по умолчанию. Выберите из адаптивного контейнера фиксированной ширины (что означает, что его максимальная ширина изменяется в каждой точке останова) или ширины жидкости (что означает, что его ширина постоянно составляет 100%).

Хотя контейнеры могут быть вложенными, большинство макетов не требуют вложенного контейнера.

<div class="container">
  <!-- Content here -->
</div>

Answer 1

Antd не предоставляет контейнер в своей сетке. Но вы можете создать свой собственный класс контейнера.

Вот как вы можете это сделать:

@import "~antd/lib/style/index";

.container {
    width: 100%;
    display: flex;
    align-self: center;
    margin: auto;
}

.make-container(@minWidth, @breakpoint) {
    @media (min-width: @minWidth) {
        .container {
            max-width: @breakpoint;
        }
    }
}

.make-container(@screen-xs-min, @screen-xs);
.make-container(@screen-sm-min, @screen-sm);
.make-container(@screen-md-min, @screen-md);
.make-container(@screen-lg-min, @screen-lg);
.make-container(@screen-xl-min, @screen-xl);
.make-container(@screen-xxl-min, @screen-xxl); // Optional

тогда вы можете использовать класс, как в начальной загрузке

<div class="container"></div>

Answer 2

Добавьте это в свой файл CSS

      .container{
  position:relative;
  margin-left:auto;
  margin-right:auto;
  padding-right:15px;
  padding-left:15px
}
@media (min-width: 476px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 768px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 992px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 1200px){
  .container{
    padding-right:15px;
    padding-left:15px
  }
}
@media (min-width: 476px){
  .container{
    width:100%
  }
}
@media (min-width: 768px){
  .container{
    width:720px;
    max-width:100%
  }
}
@media (min-width: 992px){
  .container{
    width:960px;
    max-width:100%
  }
}
@media (min-width: 1200px){
  .container{
    width:1140px;
    max-width:100%
  }
}
@media (min-width: 1400px){
  .container{
    width:1340px;
    max-width:100%
  }
}

Answer 3

Вы можете создать контейнер из Row и Col

Для пространства сторон

      <Col xs={1} sm={2}></Col>

Для содержания

      <Col xs={22} sm={20}><Col>

сумма 3 должна дать 24

Пример:

      <Row>
  <Col xs={1} sm={2}></Col>
  <Col xs={22} sm={20}>
    { Content }
  </Col>
  <Col xs={1} sm={2}></Col>
</Row>

Если вам нужно больше точек останова для отзывчивости, используйте другие точки: xs, sm, md, lg, xl, xxl.

Answer 4

Ну, просматривая документацию, они состоят из Colс и Rows. Ничего подобного React-Bootstrap <Grid /> (который является компонентом для container учебный класс)

Answer 5

Ant Design не предоставляет такой функциональности, вам нужно будет создать ее самостоятельно. В дополнение к уже предложенному подходу с использованием классов CSS вы также можете создать компонент React. Если вы используете стилизованные компоненты, это будет выглядеть примерно так:

      import React from 'react'
import styled from 'styled-components'

export const Container = styled.div`
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;

  @media (min-width: 576px) {
    max-width: 576px;
  }

  @media (min-width: 768px) {
    max-width: 768px;
  }

  @media (min-width: 992px) {
    max-width: 992px;
  }

  @media (min-width: 1200px) {
    max-width: 1200px;
  }
`

function Container(props) {
  return <S.Container {...props} />
}

export default Container

Затем вы можете использовать его как обычный компонент React:

      <Container>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</Container>