Bootstrap 5 网格 中等

中等网格示例

在上一章中，我们展示了一个网格示例，其中包含用于小型设备的类。我们使用了两个 div（列），并为它们分配了 25%/75% 的拆分。

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

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

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

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

仅使用中等

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

自动布局列

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

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

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