Bootstrap 大屏幕设备网格

Bootstrap 网格实例: 大型设备

在前一章中，我们介绍了一个网格实例，其中包含了中型和小型设备的样式类。我们使用了两个div（列），我们在小型设备上将其分割成 25% 与 75%，在中型设备上将其分割成 50% 与 50%:

但是在大型屏幕设备上将其设计成 33% 与 66% 的两列可能显示效果会更好。

提示：大型设备的定义是屏幕宽度在 1200 像素及以上。

对于大屏幕设备，我们使用 .col-lg-* 样式类。

现在我们为大型设备添加这样的列宽s:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

现在，对于较小的设备上，请使用包含 -sm- 的类。在中等设备上，请使用包含 -md- 的类。而在大型设备上，请使用包含 -lg- 的类。

以下实例将导致小型设备上的拆分比例为 25% 与 75%，中型（和大型）设备上的拆分比例为 50% 与 50%。在超小型设备上，在大型设备上拆分比例为 33% 与 66%:

实例

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

只使用大型样式

在下面的实例中，我们只指定 .col-lg-6 样式类（不含 .col-md- 与/或 .col-sm-）。这意味着大型设备将分成 50% 与 50%。然而，对于中小型设备，它将垂直堆叠（100% 宽度）:

实例

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