Bootstrap 5 網格 大螢幕

大螢幕網格示例

在上一個章節中，我們展示了一個具有針對小尺寸和大尺寸裝置的網格示例。我們使用了兩個 div（列），並在小尺寸裝置上將它們設定為 25%/75% 的比例，在尺寸裝置上設定為 50%/50% 的比例。

但在大尺寸裝置上，33%/66% 的比例可能更好。

對於大螢幕裝置，我們將使用.col-lg-*類。

現在 Bootstrap 將會說“在小尺寸裝置上，檢視帶有-sm-的類並使用它們。在中等尺寸裝置上，檢視帶有-md-的類並使用它們。在大尺寸裝置上，檢視帶有-lg-的類並使用它們。”

下面的示例將在小螢幕裝置上產生25%/75%的分割，在中等螢幕裝置上產生50%/50%的分割，在大、超大和XXL螢幕裝置上產生33%/66%的分割。在超小螢幕裝置上，它們將自動堆疊（100%）。

僅使用大尺寸

在下面的示例中，我們只指定了.col-lg-6類（不帶.col-md-*和/或.col-sm-*）。這意味著大、超大和XXL螢幕裝置將各佔50%。然而，對於中、小和超小螢幕裝置，它們將垂直堆疊（100%寬度）。

自動佈局列

在 Bootstrap 5 中，有一種簡單的方法可以為所有裝置建立等寬的列：只需從.col-lg-*中刪除數字，並在指定的.col元素數量上僅使用.col-lg類。Bootstrap 將識別出有多少列，並且每一列將獲得相同的寬度。

如果螢幕尺寸小於992px，列將水平堆疊。