前端必知必会-Boostrap5容器

---

Bootstrap 5 容器

Bootstrap 需要一个包含元素来包装网站内容。

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

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

固定容器

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

请注意，其宽度（max-width）会根据不同的屏幕尺寸而变化：

	超小<576px	小≥576px	中≥768px	大≥992px	超大≥1200px	XXL≥1400px
max-width	100%	540px	720px	960px	1140px	1320px

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

示例

<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>

XXL 断点（≥1400px）是 Bootstrap 5 中的新内容，而 Bootstrap 4 中最大的断点是超大（≥1200px）。

流体容器

使用 .container-fluid 类创建一个全宽容器，该容器将始终横跨整个屏幕宽度（宽度始终为 100%）：

示例

<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>

容器填充

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

示例
``html

```

容器边框和颜色

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

示例

<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 类来确定容器何时应响应。

容器的最大宽度会根据不同的屏幕尺寸/视口而变化：

类别	超小<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>

---

总结

本文介绍了Boostrap5容器的使用，如有问题欢迎私信和评论