跳至主要内容 跳至文档导航

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

它们是如何工作的

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

Bootstrap带有三种不同的容器:

  • .container,在每个响应断点处设置 max-width
  • .container-{breakpoint}, 即 width: 100% ,直到指定的断点
  • .container-fluid,在所有断点处为 width: 100%

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

查看它们的实际效果,并在我们的 Grid 示例.

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
X-Large
≥1200px
XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

默认容器

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

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

响应式容器

响应式容器允许您指定一个 100% 宽的类,直到到达指定的断点,之后我们对每个较高的断点应用max-width。例如, .container-sm是100%宽的,直到到达sm断点,它将使用 mdlgxlxxl进行扩展。

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