Bootstrap 4 网格 - 超大屏幕

XLarge 网格示例

在上一章中，我们展示了一个适用于小屏幕和中等屏幕设备的网格示例。我们使用了两个 div（列），在小屏幕设备上将它们分割为 25%/75%，在中等屏幕设备上分割为 50%/50%，在大屏幕设备上分割为 33%/66%。

但在超大屏幕设备上，20%/80% 的分割可能更好。

对于超大屏幕设备，我们将使用 .col-xl-* 类。

下面的示例将在小屏幕设备上产生 25%/75% 的分割，在中等屏幕设备上产生 50%/50% 的分割，在大屏幕设备上产生 33%/66% 的分割，在超大屏幕设备上产生 20%/80% 的分割。在超小屏幕设备上，它将自动堆叠（100%）。

仅使用 XLarge

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

自动布局列

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

如果屏幕尺寸小于 1200 像素，列将水平堆叠。