Bootstrap5 集装箱

Bootstrap 5 容器

您从上一章中了解到，Bootstrap 需要一个包含元素来包装站点内容。

容器用于填充其中的内容，有两个可用的容器类：

这个.container类提供了响应式固定宽度容器
这个.container-fluid类提供了一个全宽容器，跨越视口的整个宽度

。容器

.容器流体

固定集装箱

使用.container类来创建响应式、固定宽度的容器。

注意它的宽度（max-width）会在不同的屏幕尺寸上发生变化：

	特小号 <576像素	小的 ≥576像素	中等的 ≥768像素	大的 ≥992像素	特大号 ≥1200像素	特大号 ≥1400像素
最大宽度	100%	540像素	720像素	960像素	1140像素	1320像素

打开下面的示例并调整浏览器窗口的大小，可以看到容器宽度在不同的断点处会发生变化：

示例

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

亲自试一试 »

XXL 断点（≥1400px）是新的在Bootstrap 5中，而Bootstrap 4中最大的断点是Extra Large（≥1200px）。

流体容器

使用.container-fluid类来创建一个全宽容器，它将始终跨越屏幕的整个宽度（width总是100%）：

示例

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

亲自试一试 »

集装箱填料

默认情况下，容器具有左内边距和右内边距，没有顶部或底部内边距。因此，我们经常使用间距实用程序，例如额外的填充和边距，使它们看起来更好。例如， .pt-5意思是“添加一个大顶部填充”：

示例

亲自试一试 »

容器边框和颜色

其他实用程序，例如边框和颜色，也经常与容器一起使用：

示例

亲自试一试 »

您将在后面的章节中了解有关颜色和边框实用程序的更多信息。

响应式容器

您还可以使用.container-sm|md|lg|xl类来确定容器何时应该响应。

这个max-width容器的形状会在不同的屏幕尺寸/视口上发生变化：

类	特小号 <576像素	小的 ≥576像素	中等的 ≥768像素	大的 ≥992像素	特大号 ≥1200像素	特大号 ≥1400像素
`.container-sm`	100%	540像素	720像素	960像素	1140像素	1320像素
`.container-md`	100%	100%	720像素	960像素	1140像素	1320像素
`.container-lg`	100%	100%	100%	960像素	1140像素	1320像素
`.container-xl`	100%	100%	100%	100%	1140像素	1320像素
`.container-xxl`	100%	100%	100%	100%	100%	1320像素

示例

<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教程。