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