13

Ant Design for React 中是否存在 Bootstrap Grid “容器”概念？

容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的。从响应式、固定宽度的容器（意味着它的最大宽度在每个断点处变化）或流体宽度（意味着它一直是 100% 宽）中进行选择。

虽然容器可以嵌套，但大多数布局不需要嵌套容器。

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

4 回答 4

10

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>
于 2019-03-07T11:08:01.067 回答
3

好吧，通过查看文档，它们是由Cols 和Rows 组成的网格系统。没有什么像 React-Bootstrap <Grid />（这是container类的组件）

于 2018-04-01T08:19:14.907 回答
3

将此添加到您的一些 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%
  }
}
于 2021-08-22T12:09:01.723 回答
0

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>
于 2021-11-06T14:49:31.477 回答