Bootstrap 網格 - 中等裝置
Bootstrap 網格示例：中等裝置
| 超小屏 | 小 | 中 | 大 | |
|---|---|---|---|---|
| 類字首 | .col-xs |
.col-sm |
.col-md |
.col-lg |
| 螢幕寬度 | <768px | >=768px | >=992px | >=1200px |
在上一個章節中，我們展示了一個帶有小螢幕裝置的網格示例。我們使用了兩個 div（列），並將它們分成了 25%/75% 的比例。
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
但在中等螢幕裝置上，設計可能最好是 50%/50% 的比例。
提示：中等裝置定義為螢幕寬度在 992 畫素到 1199 畫素之間。
對於中等裝置，我們將使用 .col-md-* 類。
現在我們將新增中等裝置的列寬
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
現在 Bootstrap 會說“在小尺寸裝置上，檢視帶有 -sm- 的類並使用它們。在中等尺寸裝置上，檢視帶有 -md- 的類並使用它們”。
以下示例將在小尺寸裝置上產生 25%/75% 的分割，在中等（及大尺寸）裝置上產生 50%/50% 的分割。在超小尺寸裝置上，它將自動堆疊（100%）
示例
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
自己動手試一試 »
注意：確保總和始終為 12。
只使用中等螢幕
在下面的示例中，我們只指定了 .col-md-6 類（沒有 .col-sm-*）。這意味著中等和大型裝置將分割 50%/50% - 因為該類會向上擴充套件。但是，對於小尺寸裝置，它將垂直堆疊（100% 寬度）
示例
<div class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
自己動手試一試 »下一章將展示如何為大螢幕裝置新增不同的分割百分比。
