Bootstrap 4 容器
容器
您从上一章了解到 Bootstrap 需要一个容器元素来包裹站点内容。
容器用于填充它们内部的内容，并且有两个容器类可用
- The
.container类提供一个响应式的 固定宽度容器 - The
.container-fluid类提供一个 全宽度容器，跨越视窗的整个宽度
.container
.container-fluid
固定容器
使用 .container 类来创建一个响应式的，固定宽度的容器。
请注意，它的宽度 (max-width) 会在不同的屏幕尺寸上发生变化
| 超小型 <576px |
小型 ≥576px |
中等 ≥768px |
大型 ≥992px |
超大型 ≥1200px |
|
|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px |
打开下面的示例并调整浏览器窗口大小，以查看容器宽度在不同的断点处会发生变化
流体容器
使用 .container-fluid 类创建一个全宽度容器，它将始终跨越屏幕的整个宽度 (width 始终为 100%)
容器填充
默认情况下，容器具有 15px 的左右填充，没有上下填充。因此，我们通常使用 间距实用工具，例如额外的填充和边距，以使它们看起来更好。例如，.pt-3 表示“添加 16px 的顶部填充”
您将在我们的 BS4 实用工具章节 中了解更多关于间距实用工具的信息。
容器边框和颜色
其他实用工具，如边框和颜色，也经常与容器一起使用
示例
我的第一个 Bootstrap 页面
这个容器有一个边框和一些额外的填充和边距。
我的第一个 Bootstrap 页面
这个容器有一个深色的背景颜色和白色文本，以及一些额外的填充和边距。
我的第一个 Bootstrap 页面
这个容器有一个蓝色的背景颜色和白色文本，以及一些额外的填充和边距。
<div class="container p-3 my-3 border"></div>
<div class="container p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary text-white"></div>
尝试一下 »
您将在我们的 BS4 颜色章节 和 BS4 实用工具章节 中了解更多关于颜色和边框实用工具的信息。
响应式容器
您还可以使用 .container-sm|md|lg|xl 类来创建响应式容器。
容器的 max-width 会在不同的屏幕尺寸/视窗上发生变化
| 类 | 超小型 <576px |
小型 ≥576px |
中等 ≥768px |
大型 ≥992px |
超大型 ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
示例
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
尝试一下 »
你知道吗？
W3.CSS 是 Bootstrap 4 的一个极好的替代方案。
W3.CSS 更小，更快，更易于使用。
如果您想学习 W3.CSS，请访问我们的 W3.CSS 教程.
