Bootstrap 4 网格 - 特大

特大网格示例

在上一章中，我们展示了一个包含小尺寸和中尺寸设备类的网格示例。我们使用了两个 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 4 中，有一种简单的方法可以为所有设备创建等宽列：只需从 .col-xl-* 中删除数字，并在指定数量的 **col 元素** 上使用 .col-xl 类。Bootstrap 将识别有多少列，并且每列都将获得相同的宽度。

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