容器

他们如何工作

🌐 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-{breakpoint}，它是 width: 100% 直到指定的断点
• .container-fluid，它在所有断点处都是 width: 100%

下表说明了每个容器的 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 映射和变量的更多信息和示例，请参阅网格文档的 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();
}