Bootstrap4 容器(Container) 详解

使用 Bootstrap 创建容器

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

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

• .container，它在每个响应断点处都有一个最大宽度。
• .container-fluid, 在所有断点处都有 100% 的宽度。
• .container-{breakpoint}, 在指定的断点之前有 100% 的宽度。 下表说明了每个容器的最大宽度如何跨每个断点变化。

例如，当使用.container类时，如果视口宽度<576px，容器的实际宽度将为100%。如果视口宽度≥576px但<768px，则为540px；如果视口宽度≥768px但<992px，则为720px；如果视口宽度≥992px但<1200px，则为960px；如果视口宽度≥1200px但<1400px，则为1140px；如果视口宽度≥1400px，则为1320px。

同样，当我们使用.container-lg类时，容器的实际宽度将是 100%，直到视口宽度 <992px；如果视口宽度 ≥992px 但 <1200px，则为 960px；如果视口宽度 ≥1200px 但<1400px ，则为 1140px；如果视口宽度≥1400px，则为 1320px。

创建响应式固定宽度容器

我们可以简单地使用.container类来创建一个响应式、固定宽度的容器。容器的宽度会在不同的断点或屏幕尺寸处发生变化，如上面表格中所示。

<div class="container">
    <h1>这是一个标题</h1>
    <p>下面是一段文本.</p>
</div>

尝试一下

上述示例显示样式如下所示

创建流体容器

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

<div class="container-fluid">
    <h1>这是一个标题</h1>
    <p>这是一段文本.</p>
</div>

尝试一下

为容器指定响应断点

自 Bootstrap v4.4 起，我们还可以创建 100% 宽的容器，直到达到指定的断点，之后将应用每个更高断点的 max-width。

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

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

尝试一下

为容器添加背景和边框

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

<!-- 黑色背景白色文字的容器 -->
<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>

尝试一下

对容器应用填充和边距

默认情况下，容器的左侧和右侧填充为 12px，顶部和底部没有填充。要应用额外的填充和边距，可以使用 spacing utility classes。

<!-- 带有边框，额外padding和margin的容器-->
<div class="container border py-3 my-3">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

尝试一下

提示 ：避免在固定和响应式容器上设置左右边距，因为Bootstrap 会在某些断点处自动将值应用于 margin-left 和 margin-right 属性，以将容器水平居中对齐。