Bootstrap5 容器文档翻译

容器

容器是 Bootstrap 的基本构建块，它包含、填充和对齐给定设备或视口中的内容。

它们的工作原理

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

Bootstrap 附带三种不同的容器：

.container，在每个响应断点处设置 max-width
.container-fluid，它处于所有断点 width: 100%
.container-{breakpoint}，直到指定的断点 width: 100%
下表说明了每个容器与原始容器的比较情况以及每个断点之间的比较情况。
max-width.container.container-fluid

查看它们的实际效果，并在网格示例中比较它们。

默认容器

我们的默认类是一个响应式的固定宽度容器，这意味着它在每个断点处都会更改。
.containermax-width

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

响应式容器

响应式容器允许您指定一个 100% 宽的类，直到到达指定的断点，之后我们对每个较高的断点应用 s。例如，在到达断点之前，起始宽度为 100%，它将进行纵向扩展。
max-width.container-smsmmdlgxlxxl

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