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>
自己尝试 »下一章将展示如何为大型设备添加不同的分割百分比。
