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 会识别有多少列，每列将获得相同的宽度。

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