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

Bootstrap附带三种不同的容器：

• .container，它在每个响应拐点处设置最大宽度。
• .container-fluid，在所有拐点处为 width: 100%。
• .container-{breakpoint}，直到指定的拐点 width：100%。

下表显示了每个容器的最大宽度与原始宽度的比较。集装箱和集装箱。容器流体穿过每个断点。

	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 类是一个响应性强、固定宽度的容器，这意味着它的最大宽度在每个断点处都会发生变化。

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

响应式容器

响应式容器允许您指定一个100%宽的类，直到达到指定的拐点，然后我们为每个更高的拐点应用最大宽度。例如：在到达 sm 拐点之前，.container-sm 的宽度为100%，在该拐点处，它将与 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>