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

则可以像在bootstrap中一样使用该类

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

将其添加到您某些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%
  }
}

通过查看文档，可以发现它们是由Col和Row组成的网格系统。与React引导<Grid />（container类的组件）完全不同

Ant Design does not provide such functionality, you'll need to create it by your own. In addition to the CSS class approach already suggested, you could also create a React component. If you are using Styled Components it'd look something like this:

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

Then you can use it as a regular React component:

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

可以从行和列创建容器
用于侧面的空间

<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。