Containers容器

How they work作用原理

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. 容器是Bootstrap中最基本的布局元素，在使用默认网格系统时是必需的。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 comes with three different containers:Bootstrap附带三种不同的容器：

• .container, which sets a max-width at each responsive breakpoint，它在每个响应断点处设置max-width
• .container-fluid, which is width: 100% at all breakpoints，即在所有断点处为width: 100%
• .container-{breakpoint}, which is width: 100% until the specified breakpoint，它是width: 100%，直到指定的断点

The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint.下表说明了每个容器的max-width如何与穿过每个断点的原始.container和.container-fluid进行比较。

See them in action and compare them in our Grid example.在我们的网格示例中查看并比较它们。

Default container默认容器

Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.我们默认的.container类是一个响应性的、固定宽度的容器，这意味着它的max-width在每个断点处都会改变。

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

Responsive containers响应容器

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

Fluid containers流体容器

Use .container-fluid for a full width container, spanning the entire width of the viewport.将.container-fluid用于全宽容器，跨越视口的整个宽度。

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

Sass

As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire.如上所示，Bootstrap生成一系列预定义的容器类，以帮助您构建所需的布局。 You may customize these predefined container classes by modifying the Sass map (found in _variables.scss) that powers them:您可以通过修改支持这些预定义容器类的Sass映射（位于_variables.scss中）来自定义这些预定义容器类：

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

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

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部分。