Bootstrap 5 容器

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

我们在容器中填充内容，并且有两个容器类可用：

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

固定容器

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

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

请打开下面的例子并调整浏览器窗口的大小，来查看容器宽度在不同断点处发生的变化：

实例

  
我的第一张 Bootstrap 页面
  
这是一些文本。

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

流体容器

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

实例

  
我的第一张 Bootstrap 页面
  
这是一些文本。

容器填充

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

实例

容器边框和颜色

其他工具，诸如边框和颜色，也经常与容器一起使用：

实例

您将在后面的章节中学到更多关于颜色和边框工具的知识。

响应式容器

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

容器的 max-width 将在不同的屏幕尺寸/视口上发生变化：

实例

.container-sm
.container-md
.container-lg
.container-xl
.container-xxl