容器 (Containers)

工作原理

容器 (Containers)是Bootstrap中最基本的布局元素，在使用 默认网格系统时是必需的。容器用于容纳、填充和(有时)使内容居中。虽然容器 (Containers) 可以 嵌套，但大多数布局不建议这样做，这样只会使你的代码更加臃肿。

Bootstrap有三个不同的容器 (Containers):

• .container，它设置每个响应断点的最大宽度(max-width)
• .container-fluid, 所有断点的宽度为100%(width: 100%)
• .container-{断点规格}, 宽度100%(width: 100%)直到指定的断点

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

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

默认容器

默认的 .container 类是一个响应性的、固定宽度的容器，这意味着它的最大宽度会在每个断点处改变。

<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>

流式布局

使用 .container-fluid 作为全宽度容器，跨越整个屏幕宽度。

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

Sass

如上所示，Bootstrap生成一系列预定义的容器类来帮助您构建所需的布局。你可以通过修改Sass样式(在 _variables.scss中找到)来定制这些预定义的容器类:

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

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

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