Bootstrap 5 网格 大尺寸

大尺寸网格示例

在上一章中，我们展示了一个网格示例，其中包含用于小尺寸和中尺寸设备的类。我们使用了两个 div（列），并在小尺寸设备上分配了 25%/75% 的比例，而在中尺寸设备上分配了 50%/50% 的比例

但在大型设备上，设计可能更适合 33%/66% 的比例。

对于大型设备，我们将使用 .col-lg-* 类

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

以下示例将在小尺寸设备上产生 25%/75% 的比例，在中尺寸设备上产生 50%/50% 的比例，以及在大型、极大型和 XXL 尺寸设备上产生 33%/66% 的比例。在极小尺寸设备上，它将自动堆叠（100%）

仅使用大型尺寸

在下面的示例中，我们只指定了 .col-lg-6 类（不包含 .col-md-* 和/或 .col-sm-*）。这意味着大型、极大型和 XXL 尺寸设备将以 50%/50% 的比例进行分割。但是，对于中尺寸、小尺寸和极小尺寸设备，它将垂直堆叠（100% 宽度）

自动布局列

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

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