容器（Containers）

容器是Bootstrap的基本构建块，用于在给定的设备或窗口中包含、填充和对齐内容。

On this page

如何工作

容器是Bootstrap中最基本的布局元素，在使用默认网格系统时是必需的。容器用于容纳、填充和（有时）集中其中的内容。虽然容器可以嵌套，但大多数布局不需要嵌套的容器。

Bootstrap附带三种不同的容器：

  • .container, 在每个响应断点处设置最大宽度
  • .container-fluid, 所有断点处100%
  • .container-{breakpoint}, 宽度：100%，直到指定的断点

下表说明了每个容器的最大宽度与每个断点上的原始.container和.container流体的比较。

你可以在我们的网格示例中查看并比较它们。

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		X-Large
≥1200px 		XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

默认容器

我们的默认任容器类是一个响应的、固定宽度的容器，这意味着它的最大宽度在每个断点处都会改变。

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

响应式容器

响应容器允许您指定一个100%宽的类，直到达到指定的断点，然后我们为每个较高的断点应用最大宽度。例如，.container sm在到达sm断点之前是100%宽的，在这里它将以md、lg、xl和xxl进行扩展。

<div class="container-sm">100% wide until small breakpoint</div>
        <div class="container-md">100% wide until medium breakpoint</div>
        <div class="container-lg">100% wide until large breakpoint</div>
        <div class="container-xl">100% wide until extra large breakpoint</div>
        <div class="container-xxl">100% wide until extra extra large breakpoint</div>

流式容器

使用流式容器 .container-fluid作为全宽容器，横跨视口的整个宽度。 

<div class="container-fluid">
        ...
        </div>

Sass

如上所示，Bootstrap生成一系列预定义的容器类来帮助您构建所需的布局。您可以通过修改Sass映射（在_variables.scss中找到）来定制这些预定义的容器： 

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1320px
        );

除了定制Sass之外，您还可以使用我们的Sass mixin创建自己的容器。 

// Source mixin
        @mixin make-container($padding-x: $container-padding-x) {
        width: 100%;
        padding-right: $padding-x;
        padding-left: $padding-x;
        margin-right: auto;
        margin-left: auto;
        }
        
        // Usage
        .custom-container {
        @include make-container();
        }

有关如何修改Sass映射和变量的更多信息和示例，请参阅网格文档的Sass部分。

返回顶部