容器

它们的工作原理

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

Bootstrap 附带三种不同的容器

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

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

在我们的 网格示例 中查看它们的作用并进行比较。

默认容器

我们的默认.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>

CSS

Sass 变量

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

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

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

Sass 混合

除了自定义 Sass 外，您还可以使用我们的 Sass 混合创建自己的容器。

// 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();
}