Bootstrap 5 网格系统

网格系统

Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 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。

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

网格选项

下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作：