Bootstrap 5 大型网格

大型设备网格实例

在前一章中，我们介绍了一个网格示例，其中包含了中小型设备的类。我们使用了两个div（列），我们在小型设备上给了它们 25%/75% 的分割，在中型设备上给了它 50%/50% 的分割:

但在大型设备上 33%/66% 的拆分设计效果可能会更好。

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

现在 Bootstrap 会说 "在小型设备，寻找包含 -sm- 的类并使用它们。在中型设备的情况下，看看里面有 -md- 的类并使用它们。在大型设备的情况下，看看里面有 -lg- 的类并使用它们"。

以下示例将导致小型设备的拆分比例为 25%/75%，中型设备的拆分比例为 50%/50%，大型、特大型和超大型设备的拆分比例为 33%/66%。在超小型设备上，它会自动堆叠（100%）:

只使用大型类

在下面的示例中，我们只指定 .col-lg-6 类 (不含 .col-md-* 或 .col-sm-*)。这意味着大型、特大型或超大型设备将分成 50%/50%。但是，对于中小型和超小型设备，它将垂直堆叠（100%宽度）:

自动布局等宽列

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

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