Bootstrap - 大型网格

Bootstrap 大型设备网格实例

  超小型 小型 中型 大型
Class 前缀 .col-xs .col-sm .col-md .col-lg
屏幕宽度 <768px >=768px >=992px >=1200px

在前一章中,我们介绍了一个网格示例,其中包含了中小型设备的类。我们使用了两个 div(列),我们在小型设备上给了它们 25%/75% 的拆分,在中型设备上给了它们 50%/50% 的拆分:

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

但在大型设备上,33%/66% 的拆分设计可能效果会更好。

提示: 大型设备被定义为屏幕宽度在 1200 px 及以上

对于大型设备,我们将使用 .col-lg-* 类。

现在我们为大型设备添加列宽:

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

现在 Bootstrap 会说 "在小型设备,寻找包含 -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>
亲自试一试 »

注释: 确保总和始终等于12。


只使用大型类

在下面的示例中,我们只指定 .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>
亲自试一试 »