Bootstrap 4 網格 - 大尺寸

大尺寸網格示例

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

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

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

現在 Bootstrap 會說：“在小尺寸上，檢視帶有 -sm- 的類並使用它們。在尺寸上，檢視帶有 -md- 的類並使用它們。在大尺寸上，檢視帶有 -lg- 字樣的類並使用它們。”

以下示例將在小尺寸裝置上實現 25%/75% 的比例，在中等尺寸裝置上實現 50%/50% 的比例，在大尺寸和特大尺寸裝置上實現 33%/66% 的比例。在特小尺寸裝置上，它們將自動堆疊（100% 寬度）。

僅使用大尺寸

在下面的示例中，我們僅指定 .col-lg-6 類（不帶 .col-md-* 和/或 .col-sm-*）。這意味著大尺寸和特大尺寸裝置將是 50%/50% 的比例。但是，對於中、小和特小尺寸裝置，它們將垂直堆疊（100% 寬度）。

自動佈局列

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

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