容器

他们如何工作

¥How they work

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

¥Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap 附带三个不同的容器：

¥Bootstrap comes with three different containers:

• .container，在每个响应断点处设置 max-width

  ¥.container, which sets a max-width at each responsive breakpoint

• .container-{breakpoint}，直到指定断点为止是 width: 100%

  ¥.container-{breakpoint}, which is width: 100% until the specified breakpoint

• .container-fluid，在所有断点处都是 width: 100%

  ¥.container-fluid, which is width: 100% at all breakpoints

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

¥The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.

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

¥See them in action and compare them in our Grid example.

默认容器

¥Default container

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

¥Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.

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

响应式容器

¥Responsive containers

响应式容器允许你指定一个 100% 宽的类，直到到达指定的断点，之后我们对每个较高的断点应用 max-width。例如，.container-sm 开始时为 100% 宽，直到到达 sm 断点，然后将按 md、lg、xl 和 xxl 进行扩展。

¥Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and 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 containers

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

¥Use .container-fluid for a full width container, spanning the entire width of the viewport.

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

CSS

Sass 变量

¥Sass variables

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

¥As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in _variables.scss) that powers them:

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

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

¥For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.

Sass 混入

¥Sass mixins

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

¥In addition to customizing the Sass, you can also create your own containers with our 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();
}