容器 · Bootstrap 6.0 中文文档

工作方式

容器是 Bootstrap 中最基础的布局元素，并且在使用默认网格系统时必须使用。容器用于容纳、添加内边距，并（有时）居中其中的内容。容器可以嵌套，但大多数布局并不需要嵌套容器。

Bootstrap 提供三种不同的容器：

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

下表说明了每种容器的 max-width 在各断点下与原始的 .container 和 .container-fluid 相比如何。

在网格文档中查看并比较它们的实际效果。

	超小 <576px	小 ≥576px	中 ≥768px	大 ≥1024px	超大 ≥1280px	特大 ≥1536px
`.container`	100%	540px	720px	960px	1140px	1440px
`.sm:container`	100%	540px	720px	960px	1140px	1440px
`.md:container`	100%	100%	720px	960px	1140px	1440px
`.lg:container`	100%	100%	100%	960px	1140px	1440px
`.xl:container`	100%	100%	100%	100%	1140px	1440px
`.2xl:container`	100%	100%	100%	100%	100%	1440px
`.container-fluid`	100%	100%	100%	100%	100%	100%

默认容器

默认的 .container 类是一个响应式固定宽度容器，也就是说它的 max-width 会随每个断点变化。

HTML

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

响应式容器

响应式容器允许你指定一个类，在到达指定断点之前保持 100% 宽度，之后会为更高的各个断点应用 max-width。例如，.sm:container 初始为 100% 宽度，直到达到 sm 断点后，会随 md、lg、xl 和 2xl 逐级放大。

HTML

          <div class="sm:container">100% wide until small breakpoint</div>
<div class="md:container">100% wide until medium breakpoint</div>
<div class="lg:container">100% wide until large breakpoint</div>
<div class="xl:container">100% wide until extra large breakpoint</div>
<div class="2xl:container">100% wide until extra extra large breakpoint</div>

流式容器

使用 .container-fluid 创建全宽容器，横跨视口的整个宽度。

HTML

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

CSS

Sass 变量

如上所示，Bootstrap 生成了一系列预定义容器类，帮助你构建想要的布局。你可以修改驱动这些类的 Sass map（位于 _config.scss）来自定义它们：

scss/_config.scss

$container-max-widths: ();
// stylelint-disable-next-line scss/dollar-variable-default
$container-max-widths: defaults(
  (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1200px,
    2xl: 1440px
  ),
  $container-max-widths
);

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

Sass mixin

除了自定义 Sass，你还可以使用我们的 Sass mixin 创建自己的容器。

SCSS

          // Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-inline: $padding-x;
  margin-inline: auto;
}

// Usage
.custom-container {
  @include make-container();
}