Containers

工作原理

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

Bootstrap有三个不同的containers：

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

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

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

默认containers

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

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

响应式containers

响应containers允许您指定一个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>

Fluid containers

对全宽containers使用.container-fluid，覆盖视口的整个宽度。

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

CSS

Sass variables

如上所示，Bootstrap生成一系列预定义的containers类，以帮助您构建所需的布局。 您可以通过修改为这些预定义containers类提供动力的Sass映射(位于_variables.scss中)来自定义它们：

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

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

Sass mixins

除了定制Sass，您还可以使用我们的Sass mixin创建自己的containers。

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