Bootstrap 5 网格示例

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

三个等宽列

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

使用数字创建三个等宽列

你也可以使用数字来控制列宽。只要确保总和不超过 12（你不需要使用所有 12 列）。

三个不等宽列

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

设置一列宽度

然而，只需设置一列的宽度就足够了，让兄弟列自动调整大小以适应它。以下示例将创建一个 25%/50%/25% 的分割。

更多等宽列

行列

你也可以使用 .row-cols-* 类来控制应该并排显示多少列（无论有多少列）。

更多不等宽列

等高

如果一列比其他列更高（由于文本或 CSS 高度），其余列将跟随。

嵌套列

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

响应式类

Bootstrap 5 网格系统有五个类。

• .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