Bootstrap 大型屏幕网格

  • 定义和使用

    网格选项
      特小屏幕 小屏幕 中等屏幕 大屏幕 特大屏幕
    类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
    屏幕宽度 <576px ≥576px ≥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% 可能会更好。
    大型设备定义为屏幕宽度从 992px 到 1199px。
    对于大型设备屏幕,我们将使用 .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%。 在超小型设备上,它将自动堆叠(100%):
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-6 col-lg-4 bg-success">
          col-sm-3 col-md-6 col-lg-4
        </div>
        <div class="col-sm-9 col-md-6 col-lg-8 bg-warning">
          col-sm-9 col-md-6 col-lg-8
        </div>
      </div>
    </div>
    
    尝试一下
    输出结果如下:
    col-sm-3 col-md-6 col-lg-4
    col-sm-9 col-md-6 col-lg-8
    注意:注确保总和等于或少于12(不需要使用所有12个可用列)。
  • 仅适用大型屏幕

    在下面的示例中,我们仅指定 .col-lg-6 类(不包括.col-md- *和/或.col-sm- *);这意味着大型和超大型设备将拆分 50%/50%;但是,对于中,小型和超小型设备,它将垂直堆叠(宽度为100%):
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">col-lg-6</div>
        <div class="col-lg-6">col-lg-6</div>
      </div>
    </div>
    
    尝试一下
  • 自动布局列

    Bootstrap 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-lg-* 中删除数字,并且仅对指定数量的 col 元素使用 .col-lg 类;Bootstrap 将识别出有多少列,并且每列将具有相同的宽度。
    如果屏幕尺寸<992px,则这些列将水平堆叠:
    <!-两列:大型屏幕及以上宽度为50%->
    <div class="row">
      <div class="col-lg bg-success">1 of 2</div>
      <div class="col-lg bg-warning">2 of 2</div>
    </div>
    <!-四列:大型屏幕及以上宽度为25%->
    <div class="row">
      <div class="col-lg bg-success">1 of 4</div>
      <div class="col-lg bg-warning">2 of 4</div>
      <div class="col-lg bg-success">3 of 4</div>
      <div class="col-lg bg-warning">4 of 4</div>
    </div>
    
    尝试一下
    输出结果如下:
    1 of 2
    2 of 2
    1 of 4
    2 of 4
    3 of 4
    4 of 4