Bootstrap 中型屏幕设备网格

Bootstrap 网格实例: 中型设备

假设我们有一个包含两列的简单布局。对于小型设备，我们希望将列拆分为 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>

现在，对于较小的设备上，请使用包含 -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>

只使用中等样式

在下面的实例中，我们只指定 .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>

下一章将展示如何为大型设备网格拆分不同的百分比。