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 元素**上仅使用 .col-xl 类。Bootstrap 将识别有多少列，并且每列将获得相同的宽度。

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