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 中的最大断点是 Extra large（≥1200px）。
流式容器
使用 .container-fluid 类来创建始终跨越整个屏幕宽度的全屏容器（width 始终为 100%）。
示例
<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>This is some text.</p>
</div>
自己动手试一试 »
容器内边距
默认情况下，容器具有左侧和右侧填充，没有顶部或底部填充。因此，我们经常使用间距工具，例如额外的填充和边距，使其看起来更好。例如，.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 教程。
