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">）。然后，添加所需的列数（具有适当的 .col-*-* 类标签）。第一个星号 (*) 代表响应性：sm、md、lg、xl 或 xxl，而第二个星号代表一个数字，每个行应该加起来为 12。

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

网格选项

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