Bootstrap 容器

在本教程中，您将学习如何使用 Bootstrap 创建容器。

使用 Bootstrap 创建容器

容器是 Bootstrap 中最基本的布局元素，在使用网格系统时是必需的。 容器基本上用于用一些填充来包装内容。 在固定宽度布局的情况下，它们还用于在页面上水平居中对齐内容。

Bootstrap 提供了三种不同类型的容器：

• .container，每个响应断点都有一个最大宽度。
• .container-fluid，在所有断点处都有 100% 的宽度。
• .container-{breakpoint}，在指定断点之前有 100% 的宽度。

下表说明了每个容器的最大宽度如何跨断点变化。

例如，当使用 .container 类时，如果视口宽度小于 576px，则容器的实际宽度将为 100%，如果视口宽度大于或等于 576px，则为 540px，如果 视口宽度大于或等于 768px，如果视口宽度大于或等于 992px，则为 960px，如果视口宽度大于或等于 1200px，则为 1140px。

同样，当您使用 .container-lg 类时，容器的实际宽度将是 100%，直到视口宽度小于 992px，如果视口宽度大于或等于 992px，则为 960px， 如果视口宽度大于或等于 1200 像素，则为 1140 像素。

创建响应式固定宽度容器

您可以简单地使用 .container 类来创建响应式、固定宽度的容器。 容器的宽度会在不同的断点或屏幕尺寸处发生变化，如上图。

<div class="container">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

创建流体容器

您可以使用 .container-fluid 类来创建全宽容器。 无论设备或屏幕尺寸如何，流体容器的宽度始终为 100%。

<div class="container-fluid">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

为容器指定响应断点

从 Bootstrap v4.4 开始，您还可以创建 100% 宽的容器，直到达到指定的断点，之后将应用每个较高断点的最大宽度。

例如，.container-xl 将是 100% 宽，直到到达 xl 断点（即视口宽度 ≥ 1200px），之后应用 xl 断点的最大宽度，即 1140px。

<div class="container-sm">100% 宽直到屏幕尺寸小于 576 像素</div>
<div class="container-md">100% 宽直到屏幕尺寸小于 768 像素</div>
<div class="container-lg">100% 宽直到屏幕尺寸小于 992 像素</div>
<div class="container-xl">100% 宽直到屏幕尺寸小于 1200 像素</div>

为容器添加背景和边框

默认情况下，容器没有任何 background-color 或 border。 但是，如果您需要，您可以应用自己的样式，或者简单地使用 Bootstrap 背景颜色和边框 实用程序类 在它们上添加背景颜色或边框 ，如下例所示。

<!-- 具有深色背景和白色文本颜色的容器 -->
<div class="container bg-dark text-white">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- 浅色背景的容器 -->
<div class="container bg-light">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- 带边框的容器 -->
<div class="container border">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

对容器应用填充和边距

默认情况下，容器的左右边距为 15px，上下边没有边距。 要应用额外的填充和边距，您可以使用间距实用程序类。

<!-- Container with border, extra paddings and margins -->
<div class="container border py-3 my-3">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>