Bootstrap 4 容器
容器
您从上一章了解到，Bootstrap 需要一个包含元素来包裹网站内容。
容器用于填充其内部的内容，并且有两种可用的容器类
.container类提供了一个响应式的固定宽度容器.container-fluid类提供了一个全宽度容器，跨越视口的整个宽度
.container
.container-fluid
固定宽度容器
使用 .container 类来创建响应式的、固定宽度的容器。
请注意，它的宽度 (max-width) 会在不同屏幕尺寸下变化
| 超小屏 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
超大屏 ≥1200px |
|
|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px |
打开下面的示例，调整浏览器窗口大小，您会看到容器宽度在不同的断点处会发生变化
流体容器
使用 .container-fluid 类来创建全宽容器，它将始终跨越整个屏幕宽度 (width 始终为 100%)
示例
<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>This is some text.</p>
</div>
自己动手试一试 »
容器内边距
默认情况下，容器有 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 教程。
