Bootstrap 5 网格
Bootstrap 5 网格系统
Bootstrap 的网格系统是基于 flexbox 构建的，最多允许页面跨越 12 列。
如果您不想单独使用所有 12 列，可以将列组合在一起以创建更宽的列。
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
网格系统是响应式的，列会根据屏幕尺寸自动重新排列。
确保总数加起来为 12 或更少（不要求您使用所有 12 个可用列）。
网格类
Bootstrap 5 网格系统有六个类
.col-(超小设备 - 屏幕宽度小于 576px).col-sm-(小设备 - 屏幕宽度等于或大于 576px).col-md-(中型设备 - 屏幕宽度等于或大于 768px).col-lg-(大型设备 - 屏幕宽度等于或大于 992px).col-xl-(超大设备 - 屏幕宽度等于或大于 1200px).col-xxl-(超大屏幕设备 - 屏幕宽度等于或大于 1400px)
以上类可以组合以创建更动态和灵活的布局。
提示: 每个类都会向上扩展，所以如果你想设置 sm 和 md 相同的宽度，你只需要指定 sm。
Bootstrap 5 网格的基本结构
以下是 Bootstrap 5 网格的基本结构
<!-- 控制列宽以及它们在不同设备上的显示方式 -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
第一个例子：创建一个行 (<div class="row">)。然后，添加所需的列数（具有相应 .col-*-* 类的标签）。第一个星号 (*) 代表响应性：sm, md, lg, xl 或 xxl，而第二个星号代表一个数字，每行加起来应该等于 12。
第二个例子：不用为每个 col 添加数字，让 bootstrap 处理布局，创建等宽列：两个 "col" 元素 = 每个列 50% 宽度，三个列 = 每个列 33.33% 宽度。四个列 = 25% 宽度，以此类推。你也可以使用 .col-sm|md|lg|xl|xxl 来使列具有响应性。
下面我们收集了一些基本的 Bootstrap 5 网格布局示例。
三个等宽列
.col
.col
.col
以下示例显示了如何创建三个等宽的列，适用于所有设备和屏幕宽度
示例
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
自己动手试一试 »
响应式列
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
以下示例显示了如何创建四个等宽的列，从平板电脑开始，并扩展到超大桌面。在手机或屏幕宽度小于 576px 时，列将自动堆叠在一起
示例
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
自己动手试一试 »
两个不等宽的响应式列
.col-sm-4
.col-sm-8
以下示例显示了如何获得两个不同宽度的列，从平板电脑开始，并扩展到超大桌面
示例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
自己动手试一试 »
提示: 你将在本教程的后续部分了解到更多关于 网格系统 的内容。
