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" 元素 = 每列 50% 宽度，而三列 = 每列 33.33% 宽度。四列 = 25% 宽度，以此类推。您还可以使用 .col-sm|md|lg|xl|xxl 来使列具有响应性。

网格选项

下表总结了 Bootstrap 5 网格系统在不同屏幕尺寸下的工作方式