bootstrap5 容器(container) 详解——迹忆客-ag捕鱼王app官网

使用 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。

创建响应式固定宽度容器

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

    
    
下面是一段文本.

创建流体容器

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

    
    
这是一段文本.

为容器指定响应断点

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

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

100% 宽直到屏幕尺寸小于 576px
100% 宽直到屏幕尺寸小于 768px
100% 宽直到屏幕尺寸小于 992px
100% 宽直到屏幕尺寸小于 1200px

为容器添加背景和边框

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

    
    
this is a paragraph of text.


    
    
this is a paragraph of text.


    
    
this is a paragraph of text.

对容器应用填充和边距

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

    
    
this is a paragraph of text.

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