容器（Containers）

它们是如何工作的

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

Bootstrap 提供了三种不同的容器：

• .container, 在每个响应断点设置 max-width
• .container-{breakpoint}, 宽度：100%，直至指定的断点
• .container-fluid, 在所有断点上都是 width: 100%

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

请在我们的 Grid 示例中查看它们的实际效果并进行比较。

默认容器

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

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

响应式容器

响应式容器允许您指定一个宽度为 100% 的类，直到达到指定的断点，之后我们会为每个更高的断点应用 max-width。例如， .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>

Fluid 容器

使用.container-fluid表示全宽容器，横跨视口的整个宽度。

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

CSS

Sass 变量

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

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

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

Sass mixins

除了自定义 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();
}