Bootstrap 4 Grid 中等屏幕

中等屏幕网格示例

在上一个章节中，我们展示了一个带有小屏幕设备的网格示例。我们使用了两个 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 将识别有多少列，并且每一列将获得相同的宽度。

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

下一章将展示如何为大屏幕设备添加不同的分割百分比。