in English

容器

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

在本页面

他们是如何工作的

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

Bootstrap 带有三个不同的容器：

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

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

在我们的Grid 示例中查看它们并进行比较。

	超小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	超大 ≥1200px	XX-大 ≥1400px
`.container`	100%	540像素	720像素	960像素	1140像素	1320像素
`.container-sm`	100%	540像素	720像素	960像素	1140像素	1320像素
`.container-md`	100%	100%	720像素	960像素	1140像素	1320像素
`.container-lg`	100%	100%	100%	960像素	1140像素	1320像素
`.container-xl`	100%	100%	100%	100%	1140像素	1320像素
`.container-xxl`	100%	100%	100%	100%	100%	1320像素
`.container-fluid`	100%	100%	100%	100%	100%	100%

默认容器

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

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

响应式容器

响应式容器允许您指定一个 100% 宽的类，直到达到指定的断点，之后我们max-width为每个更高的断点应用 s。例如，在到达断点.container-sm之前是 100% 宽，在sm断点处它将使用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>

萨斯

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

$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 映射和变量的更多信息和示例，请参阅Grid 文档的 Sass 部分。