Bootstrap 5 网格

Bootstrap 5 网格系统

Bootstrap 的网格系统是基于弹性盒模型构建的，允许页面最多包含 12 列。

如果你不想单独使用所有 12 列，可以将它们组合在一起创建更宽的列。

网格系统是响应式的，列会根据屏幕尺寸自动重新排列。

确保所有列的跨度总和不超过 12（不需要使用所有 12 列）。

网格类

Bootstrap 5 网格系统有六个类：

• .col-（超小型设备 - 屏幕宽度小于 576 像素）
• .col-sm-（小型设备 - 屏幕宽度等于或大于 576 像素）
• .col-md-（中等设备 - 屏幕宽度等于或大于 768 像素）
• .col-lg-（大型设备 - 屏幕宽度等于或大于 992 像素）
• .col-xl-（超大型设备 - 屏幕宽度等于或大于 1200 像素）
• .col-xxl-（超超大型设备 - 屏幕宽度等于或大于 1400 像素）

可以组合上述类来创建更动态和灵活的布局。

提示：每个类都向上兼容，因此如果你想为 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 网格布局的基本示例。

三个等宽列

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

响应式列

以下示例展示了如何从平板电脑开始创建四个等宽列，并扩展到超大型台式机。**在手机或宽度小于 576 像素的屏幕上，列会自动堆叠在一起**

两个不等宽的响应式列

以下示例展示了如何从平板电脑开始创建两个不同宽度的列，并扩展到大型超大型台式机。