Bootstrap 容器

容器概述

Bootstrap 还需要包含元素来包装站点内容。

有两种容器类可供选择：

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

.container-fluid

固定式容器

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

请注意，其宽度（最大宽度）将在不同的屏幕尺寸上改变：

	特小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	特大屏幕 ≥1200px
max-width	100%	540px	720px	960px	1140px

<div class="container">
   <h1>我是带有响应的固定宽度容器的bootstrap页面</h1>
   <p>这个是一个段落</p>
</div>

尝试一下

可以点击尝试一下打开上面的示例，并调整浏览器窗口的大小，以查看容器宽度将在不同的断点处改变。

全宽度的容器

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

<div class="container-fluid">
   <h1>我是带有全角容器bootstrap页面</h1>
   <p>这个是一个段落</p>
</div>

尝试一下

容器填充

默认情况下，容器的左侧和右侧填充为15px，没有顶部或底部的填充。因此，我们经常使用间距工具，例如额外的填充和边距，使它们看起来更好。例如，.pt-3表示“添加16px的顶部填充”：

<div class="container pt-3"></div>

尝试一下

容器边框和颜色

边框和颜色在许多应用程序中，也经常与容器一起使用：

<div class="container p-3 my-3 border"></div>
<div class="container p-3 my-3 bg-dark text-white"></div>
<div class="container p-3 my-3 bg-primary text-white"></div>

尝试一下

尝试一下输出结果：

我的第一个Bootstrap页面

此容器有边框和一些额外的填充和边距。

我的第一个Bootstrap页面

此容器具有深色背景颜色和白色文本，以及一些额外的填充和边距。

我的第一个Bootstrap页面

此容器具有蓝色背景色和白色文本，以及一些额外的填充和边距。

响应式容器

您还可以使用 .container-sm | md | lg | xl 类创建响应容器。

容器的最大宽度将在不同的屏幕尺寸/视口上改变：

Class	特小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	特大屏幕 ≥1200px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-xl	100%	100%	100%	100%	1140px

<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>

尝试一下

容器概述

固定式容器

全宽度的容器

容器填充

容器边框和颜色

响应式容器

相关页面