Bootstrap 5 網格 - 中等螢幕

中等螢幕網格示例

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

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

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

現在 Bootstrap 將會這樣理解：“在小尺寸螢幕上，檢視帶有 -sm- 的類並使用它們。在中等尺寸螢幕上，檢視帶有 -md- 的類並使用它們。”

以下示例在小尺寸螢幕上將產生 25%/75% 的分割，在中等（以及大、超大、XXL）螢幕上將產生 50%/50% 的分割。在特小尺寸螢幕上，它們將自動堆疊（100% 寬度）。

只使用中等螢幕

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

自動佈局列

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

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

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