Bootstrap 5 特大型网格

特大型设备网格实例

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

但在特大型设备上，20%/80% 拆分的设计效果可能更好。

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

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

只使用特大型类

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

自动布局等宽列

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

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