布局

容器 (Containers)

容器 (Containers)是Bootstrap的基本构建块，它包含，填充和对齐给定设备或视口中的内容。

工作原理

容器 (Containers)是Bootstrap中最基本的布局元素，在使用 默认网格系统时是必需的。容器用于容纳、填充和(有时)使内容居中。虽然容器 (Containers) 可以嵌套，但大多数布局不建议这样做，这样只会使你的代码更加臃肿。

Bootstrap有三个不同的容器 (Containers):

.container，它设置每个响应断点的最大宽度(max-width)。
.container-fluid, 所有断点的宽度为100%(width: 100%)。
.container-{断点规格}, 宽度100%(width: 100%)直到指定的断点。

---	超小屏幕<576px	小屏幕≥576px	中等屏幕≥768px	大屏幕≥992px	超大屏幕≥1200px	超大型屏幕≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

默认容器

默认的 .container 类是一个响应性的、固定宽度的容器，这意味着它的最大宽度会在每个断点处改变。

<div class="container">
<!-- Content here -->
</div>

响应式容器

响应式容器允许您指定100％宽的类，直到达到指定的断点为止，此后，我们对每个较高的断点应用最大宽度 max-width。例如，.container-sm 的宽度为100％，直到到达 sm 断点为止，该断点将按 md, lg, xl, 和 xxl进行扩展。

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

流式布局

使用.container-fluid作为全宽度容器，跨越整个屏幕宽度。

<div class="container-fluid">
...
</div>

栅格系统

使用强大的mobile first flexbox网格来构建各种形状和大小的布局，这要归功于12列系统、6个默认响应层、Sass变量和mixin以及几十个预定义类。

bootstrap5:

布局