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 畫素，列將水平堆疊。