Bootstrap 5 容器
Bootstrap 5 容器
您在上一章中学到，Bootstrap 需要一个容器元素来包裹网站内容。
容器用于填充其内部的内容，并且有两个可用的容器类
.container类提供了一个响应式的 固定宽度容器.container-fluid类提供了一个 全宽度容器，跨越视窗的整个宽度
.container
.container-fluid
固定容器
使用 .container 类来创建一个响应式的，固定宽度的容器。
请注意，它的宽度 (max-width) 会在不同的屏幕尺寸上发生变化
| 超小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
超大 ≥1200px |
XXL ≥1400px |
|
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
打开下面的示例，并调整浏览器窗口的大小，您会看到容器宽度会在不同的断点处发生变化
XXL 断点 (≥1400px) 是 Bootstrap 5 中的 新增 内容，而 Bootstrap 4 中最大的断点是超大 (≥1200px)。
流体容器
使用 .container-fluid 类来创建一个全宽度容器，它将始终跨越屏幕的整个宽度 (width 始终为 100%)
容器填充
默认情况下，容器具有左右填充，没有上下填充。因此，我们经常使用 间距实用程序，例如额外的填充和边距，以使它们看起来更美观。例如， .pt-5 表示“添加一个较大的 顶部填充”
容器边框和颜色
其他实用程序，例如边框和颜色，也经常与容器一起使用
示例
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
动手尝试 »
您将在后面的章节中学习更多关于颜色和边框实用程序的知识。
响应式容器
您还可以使用 .container-sm|md|lg|xl 类来确定容器何时应该响应式。
容器的 max-width 会在不同的屏幕尺寸/视窗上发生变化
| 类 | 超小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
超大 ≥1200px |
XXL ≥1400px |
|---|---|---|---|---|---|---|
.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 |
示例
<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>
<div class="container-xxl">.container-xxl</div>
动手尝试 »
您知道吗？
W3.CSS 是 Bootstrap 5 的绝佳替代方案。
如果您想学习 W3.CSS，请访问我们的 W3.CSS 教程.
