Bootstrap 小屏幕设备网格

Bootstrap 网格实例: 小屏幕设备

假设我们有一个包含两列的简单布局。对于小型设备，我们希望将列拆分为 25% 与 75%。

提示：小型设备的定义是屏幕宽度从 768 像素到 991 像素。

对于小型设备，我们使用 .col-sm-* 类。

我们将在两列中添加以下类:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

以下实例将网格在小型（以及中型和大型）设备上的被拆分为 25% 与 75% 的两列。在超小型设备上，它会自动堆叠（100%）:

实例

 <div class="container-fluid">
 <h1>Hello World!</h1>
 <div class="row">
  <div class="col-sm-3" style="background-color:yellow;">
   <p>Lorem ipsum...</p>
  </div>
  <div class="col-sm-9" style="background-color:pink;">
   <p>Sed ut perspiciatis...</p>
  </div>
 </div>
 </div>

想要拆分成 33.3% 与 66.6%, 您可以使用 .col-sm-4 和 .col-sm-8:

实例

 <div class="container-fluid">
 <h1>Hello World!</h1>
 <div class="row">
  <div class="col-sm-4" style="background-color:yellow;">
   <p>Lorem ipsum...</p>
  </div>
  <div class="col-sm-8" style="background-color:pink;">
   <p>Sed ut perspiciatis...</p>
  </div>
 </div>
 </div>

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