Bootstrap 4 网格示例

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

三个相等列

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

使用数字创建三个相等列

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

三个不相等列

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

设置一列宽度

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

更多相等列

行列

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

更多不相等列

等高

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

嵌套列

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

响应式类

Bootstrap 4 网格系统有五个类。

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

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

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

堆叠到水平

以下示例展示了如何创建在超小型设备上堆叠的列布局，然后在更大的设备（sm、md、lg 和 xl）上变为水平布局。

混合搭配

无间隙

在 .row 容器中添加 .no-gutters 类以移除间隙（额外的空间）。