容器

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

在本页面

他们如何工作

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

Bootstrap附带三种不同的容器：

.container，它在每个响应断点处设置 max-width
.container-fluid，所有断点width: 100%
.container-{breakpoint}，直到指定的断点 width: 100%为止

下表说明了每个容器的max-width与原始容器.container 以及 .container-fluid 每个断点之间的比较。

在实际使用中查看它们，并在我们的 Grid示例中进行比较。

	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%

默认容器

我们默认的 .container类是一个响应式，固定宽度的容器，这意味着它 max-width在每个断点处都会更改。

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

响应式容器

响应式容器允许您指定一个100％宽的类，直到达到指定的断点为止，然后我们为每个较高的断点应用max-width。例如，.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部分。