Bootstrap4 网格示例

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

三等柱

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

使用数字的三个相等的列

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

三个不等柱

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

设置一列宽度

但是，仅设置一列的宽度就足够了，并且让同级列在其周围自动调整大小。以下示例将创建 25%/50%/25% 分割：

相等的列

行列

您还可以控制应出现在彼此旁边的列数（无论有多少列），使用.row-cols-*课程：

更多不等列

等高

如果其中一列比另一列高（由于文本或 CSS 高度），其余列将遵循：

嵌套列

以下示例显示如何创建两列布局，其中一列内还包含另外两列：

响应式课程

Bootstrap 4 网格系统有五个类：

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

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

提示：每个类都会按比例放大，因此如果您希望为sm和md，你只需要指定sm。

水平堆叠

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

连连看

无排水沟

添加.no-gutters类到.row用于移除排水沟的容器（额外空间）：