Bootstrap 5 网格 - 中等屏幕

中等屏幕网格示例

在上一个章节中，我们展示了一个带有小屏幕设备的网格示例。我们使用了两个 div（列），并将它们分成了 25%/75% 的比例。

但在中等屏幕设备上，设计可能最好是 50%/50% 的比例。

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

现在 Bootstrap 将会这样理解：“在小尺寸屏幕上，查看带有 -sm- 的类并使用它们。在中等尺寸屏幕上，查看带有 -md- 的类并使用它们。”

以下示例在小尺寸屏幕上将产生 25%/75% 的分割，在中等（以及大、超大、XXL）屏幕上将产生 50%/50% 的分割。在特小尺寸屏幕上，它们将自动堆叠（100% 宽度）。

只使用中等屏幕

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

自动布局列

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽的列：只需移除 .col-md-* 中的数字，而只在指定的 col 元素 上使用 .col-md 类。Bootstrap 将识别有多少列，并且每列将获得相同的宽度。

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

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