Bootstrap 5 网格实例

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

三个等宽列

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

使用数字的三个等宽列

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

三个不同宽度的列

要创建不同宽度的列，必须使用数字。以下示例将创建 25%/50%/25% 的拆分:

只设置一个列宽

还可以只需设置一列的宽度，并让同级列围绕它自动调整大小就可以了。以下示例将创建 25%/50%/25% 的拆分:

更多等宽的列

Row Cols

您还可以使用 .row-cols-* 类控制应该相邻显示的列数（无论有多少列）:

更多不等宽的列

等高

如果其中一列比另一列高（由于文本或 CSS 高度），其余列将跟随:

嵌套列

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

响应类

Bootstrap 4 网格系统有六个响应类:

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

可以将上面的类组合起来创建更具动态性和灵活性的布局。

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

水平堆叠

以下示例显示了如何创建一个列布局，该布局从堆叠在超小型设备上开始，然后在大型设备（sm、md、lg 和 xl）上变为水平:

混合与匹配

无间隙宽度

要更改列之间的间隙宽度（额外空间），请使用以下任一选项 .g-1|2|3|4|5 类 (.g-4 为默认值)。

要完全移除间隙宽度，请使用 .g-0: