Bootstrap 4 Grid 中等螢幕

中等螢幕網格示例

在上一個章節中，我們展示了一個帶有小螢幕裝置的網格示例。我們使用了兩個 div（列），並將它們分成了 25%/75% 的比例。

但在中等螢幕裝置上，設計可能最好是 50%/50% 的比例。

對於中等螢幕裝置，我們將使用 .col-md-* 類。

現在 Bootstrap 會說“在小螢幕尺寸下，檢視帶有 -sm- 的類並使用它們。在中等螢幕尺寸下，檢視帶有 -md- 的類並使用它們。”

下面的示例將在小螢幕裝置上產生 25%/75% 的比例，在中等（以及大螢幕和特大螢幕）裝置上產生 50%/50% 的比例。在超小螢幕裝置上，它將自動堆疊（100%寬度）。

只使用中等螢幕

在下面的示例中，我們只指定了 .col-md-6 類（沒有 .col-sm-*）。這意味著中等、大螢幕和特大螢幕裝置將是 50%/50% 的分割——因為該類會向上擴充套件。但是，對於小螢幕和超小螢幕裝置，它們將垂直堆疊（100% 寬度）。

自動佈局列

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

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

下一章將展示如何為大螢幕裝置新增不同的分割百分比。