Bootstrap 4 网格 中等

中等网格示例

在上一章中，我们展示了一个针对小型设备的网格示例。我们使用了两个 div（列），并分别分配了 25%/75% 的宽度。

但在中等设备上，50%/50% 的分配可能更适合。

对于中等设备，我们将使用 .col-md-* 类

现在 Bootstrap 将会说“在小型尺寸下，查看包含 -sm- 的类并使用它们。在中等尺寸下，查看包含 -md- 的类并使用它们”。

以下示例将在小型设备上产生 25%/75% 的分配，并在中等（以及大尺寸和超大尺寸）设备上产生 50%/50% 的分配。在超小型设备上，它将自动堆叠（100%）

仅使用中等

在下面的示例中，我们只指定了 .col-md-6 类（没有 .col-sm-*）。这意味着中等、大尺寸和超大尺寸设备将以 50%/50% 的比例分配 - 因为该类会向上扩展。但是，对于小型和超小型设备，它将垂直堆叠（100% 宽度）

自动布局列

在 Bootstrap 4 中，有一种简单的方法可以为所有设备创建等宽列：只需从 .col-md-* 中删除数字，并仅在指定数量的 col 元素上使用 .col-md 类。Bootstrap 将会识别有多少列，并将为每列分配相同的宽度。

如果屏幕尺寸 小于 768px，列将水平堆叠

下一章将展示如何为大尺寸设备添加不同的拆分百分比。