Bootstrap5 容器(Container) 详解

使用 Bootstrap 创建容器

容器是 Bootstrap 中最基本的布局元素,在使用网格系统时是必需的。容器基本上用于用一些填充来包装内容。在固定宽度布局的情况下,它们还用于在页面上水平居中对齐内容。

Bootstrap 提供了三种不同类型的容器:

  • .container,它在每个响应断点处都有一个最大宽度。
  • .container-fluid, 在所有断点处都有 100% 的宽度。
  • .container-{breakpoint}, 在指定的断点之前有 100% 的宽度。 下表说明了每个容器的最大宽度如何跨每个断点变化。

例如,当使用.container类时,如果视口宽度<576px,容器的实际宽度将为100%。如果视口宽度≥576px但<768px,则为540px;如果视口宽度≥768px但<992px,则为720px;如果视口宽度≥992px但<1200px,则为960px;如果视口宽度≥1200px但<1400px,则为1140px;如果视口宽度≥1400px,则为1320px。

同样,当我们使用.container-lg类时,容器的实际宽度将是 100%,直到视口宽度 <992px;如果视口宽度 ≥992px 但 <1200px,则为 960px;如果视口宽度 ≥1200px 但<1400px ,则为 1140px;如果视口宽度≥1400px,则为 1320px。

Classes
Bootstrap 网格系统
X-Small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
X-Large
≥1200px
XX-Large
≥1400px
.container 100% 540像素 720 像素 960 像素 1140 像素 1320 像素
.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 像素
.container-fluid 100% 100% 100% 100% 100% 100%

创建响应式固定宽度容器

我们可以简单地使用.container类来创建一个响应式、固定宽度的容器。容器的宽度会在不同的断点或屏幕尺寸处发生变化,如上面表格中所示。

<div class="container">
    <h1>这是一个标题</h1>
    <p>下面是一段文本.</p>
</div>

尝试一下


创建流体容器

可以使用.container-fluid类来创建一个宽度为100%的容器。无论设备或屏幕尺寸如何,流体容器的宽度将始终为 100%。

<div class="container-fluid">
    <h1>这是一个标题</h1>
    <p>这是一段文本.</p>
</div>

尝试一下


为容器指定响应断点

自 Bootstrap v4.4 起,我们还可以创建 100% 宽的容器,直到达到指定的断点,之后将应用每个更高断点的 max-width。

例如,.container-xl将是 100% 宽度,直到达到 xl 断点(即视口宽度 ≥ 1200 像素),之后应用 xl 断点的最大宽度,即 1140 像素。

<div class="container-sm">100% 宽直到屏幕尺寸小于 576px</div>
<div class="container-md">100% 宽直到屏幕尺寸小于 768px</div>
<div class="container-lg">100% 宽直到屏幕尺寸小于 992px</div>
<div class="container-xl">100% 宽直到屏幕尺寸小于 1200px</div>

尝试一下


为容器添加背景和边框

默认情况下,容器没有任何background-colorborder。但是,如果需要,我们可以应用自己的样式,或者简单地使用 Bootstrap background-color和border utility classes 在其上添加背景颜色或边框,如下例所示。

<!-- 黑色背景白色文字的容器 -->
<div class="container bg-dark text-white">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- 浅色背景容器 -->
<div class="container bg-light">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- 带有边框的容器 -->
<div class="container border">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

尝试一下


对容器应用填充和边距

默认情况下,容器的左侧和右侧填充为 12px,顶部和底部没有填充。要应用额外的填充和边距,可以使用 spacing utility classes。

<!-- 带有边框,额外padding和margin的容器-->
<div class="container border py-3 my-3">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

尝试一下

提示 :避免在固定和响应式容器上设置左右边距,因为Bootstrap 会在某些断点处自动将值应用于 margin-leftmargin-right 属性,以将容器水平居中对齐。

查看笔记