Bootstrap 5 网格示例

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

三个等宽列

在指定数量的元素上使用 .col 类，Bootstrap 会识别出有多少个元素（并创建等宽的列）。在下面的示例中，我们使用了三个 col 元素，每个元素的宽度为 33.33%。

使用数字创建三个等宽列

您还可以使用数字来控制列的宽度。只需确保总和等于 12 或更少（不要求您使用所有 12 个可用列）。

三个不等宽列

要创建不等宽列，您必须使用数字。以下示例将创建 25%/50%/25% 的分割。

设置一列的宽度

但是，只需设置一列的宽度就足够了，其余列会自动调整大小。以下示例将创建 25%/50%/25% 的分割。

更多等宽列

行内列

您还可以通过 .row-cols-* 类来控制相邻的列数（无论有多少个 col），

更多不等宽列

等高

如果其中一列比另一列高（由于文本或 CSS 高度），其他列也会跟随。

嵌套列

以下示例显示了如何创建一个两列布局，其中一列内有另外两列。

响应式类

Bootstrap 5 网格系统有五个类

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

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

提示: 每个类都会向上扩展，因此如果您希望为 sm 和 md 设置相同的宽度，您只需要指定 sm。

从堆叠到水平

以下示例显示了如何在超小设备上开始堆叠（默认垂直显示），然后在较大设备（sm, md, lg 和 xl）上变为水平布局。

混合搭配

无间距

要更改列之间的间距（额外空间），请使用任何 .g-1|2|3|4|5 类（.g-4 是默认值）。

要完全删除间距，请使用 .g-0。