前端必知必会-Bootstrap 5 网格

---

Bootstrap 5 网格

Bootstrap 5 网格系统

Bootstrap 的网格系统使用弹性框构建，允许整个页面最多有 12 列。

如果您不想单独使用所有 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。

第二个示例：不是为每个列添加一个数字，而是让 bootstrap 处理布局，以创建等宽的列：两个“col”元素 = 每个列 50% 的宽度，而三个列 = 每个列 33.33% 的宽度。四个列 = 25% 的宽度，等等。您还可以使用 .col-sm|md|lg|xl|xxl 使列具有响应性。

下面我们收集了一些基本的 Bootstrap 5 网格布局示例。

以下示例展示了如何在所有设备和屏幕宽度上创建三个等宽列：

示例

<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>

响应式列

以下示例展示了如何创建四个等宽列，从平板电脑开始，然后扩展到超大桌面。在手机或宽度小于 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>

两个不等宽的响应列

以下示例展示了如何从平板电脑开始获取两个不同宽度的列，并扩展到更大的额外桌面：

示例

<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>

---

总结

本文介绍了Bootstrap 5 网格的使用，如有问题欢迎私信和评论