Bootstrap4 集装箱


集装箱

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

容器用于填充其中的内容,有两个可用的容器类:

  1. 这个.container类提供了响应式固定宽度容器
  2. 这个.container-fluid类提供了一个全宽容器,跨越视口的整个宽度
。容器
.容器流体

固定集装箱

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

注意它的宽度(max-width)会在不同的屏幕尺寸上发生变化:

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

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

示例

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>
亲自试一试 »

流体容器

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

示例

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

集装箱填料

默认情况下,容器具有 15px 左右内边距,没有顶部或底部内边距。因此,我们经常使用间距实用程序,例如额外的填充和边距,使它们看起来更好。例如,.pt-3意思是"add a top padding of 16px":

示例

<div class="container pt-3"></div>
亲自试一试 »

您将在我们的文章中了解有关间距实用程序的更多信息BS4 公用事业章


容器边框和颜色

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

示例

我的第一个Bootstrap页面

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

我的第一个Bootstrap页面

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

我的第一个Bootstrap页面

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

<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>
亲自试一试 »

您将在我们的中了解有关颜色和边框实用程序的更多信息BS4 颜色章BS4 公用事业章


响应式容器

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

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

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

示例

<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>
亲自试一试 »

你可知道?

W3.CSS 是 Bootstrap 4 的绝佳替代品。

W3.CSS 更小、更快且更易于使用。

如果您想学习 W3.CSS,请访问我们的W3.CSS教程