Bootstrap 5 网格示例
下面我们收集了一些 Bootstrap 5 网格布局的示例。
三个相等的列
在指定数量的元素上使用 .col 类，Bootstrap 将识别有多少个元素（并创建等宽的列）。在下面的示例中，我们使用三个 col 元素，每个元素的宽度为 33.33%。
示例
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
使用数字的三个相等的列
您还可以使用数字来控制列宽。只需确保总数不超过 12（不要求您使用所有 12 个可用列）：
示例
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
三个不等列
要创建不等列，您必须使用数字。以下示例将创建 25%/50%/25% 的分割：
示例
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
设置一列宽度
但是，仅设置一列的宽度就足够了，并让兄弟列自动调整其大小。以下示例将创建 25%/50%/25% 的分割：
示例
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
更多相等列
示例
<!-- 两个相等列 -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- 四个相等列 -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- 六个相等的列 -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
行列
您还可以使用 .row-cols-* 类来控制应相邻显示的列数（无论有多少列）：
示例
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
更多不等列
示例
<!-- 两个不等列 -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- 四个不等列 -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3 of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- 设置两个列宽 -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
等高
示例
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
嵌套列
以下示例显示如何创建两列布局，其中一列内有另外两列：
示例
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
响应式类
Bootstrap 5 网格系统有五个类：
.col-（超小设备 - 屏幕宽度小于 576px）
.col-sm- （小型设备 - 屏幕宽度等于或大于 576px）
.col-md-（中型设备 - 屏幕宽度等于或大于 768px）
.col-lg-（大型设备 - 屏幕宽度等于或大于 992px）
.col-xl-（超大型设备 - 屏幕宽度等于或大于 1200px）
.col-xxl-（超大型设备 - 屏幕宽度等于或大于 1400px）
上述类可以组合使用，以创建更加动态和灵活的布局。
提示：每个类都会扩大，因此如果您希望为r sm 和 md，只需指定 sm。
堆叠到水平
以下示例展示了如何创建一个列布局，该布局在超小型设备上开始堆叠，然后在大型设备（sm、md、lg 和 xl）上变为水平：
示例
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
混合搭配
示例
<!-- 在超小型设备上分割 50%/50%，在大型设备上分割 75%/25% -->
<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 在超小型、小型和中型设备上分割 58%/42%，在大型和超大型设备上分割 66.3%/33.3% -->
<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!--在小型设备上分割为 25%/75%，在中型设备上分割为 50%/50%，在大型和超大型设备上分割为 33%/66%。在超小型设备上，它将自动堆叠 (100%) -->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
无间距
要更改列之间的间距（额外空间），请使用 .g-1|2|3|4|5 类中的任何一个（.g-4 为默认值）。
要完全删除装订线，请使用 .g-0：
示例
<div class="row g-0">
总结
本文介绍了Bootstrap 5 网格示例的使用，如有问题欢迎私信和评论