Bootstrap 特小屏幕网格



  • 定义和使用

    网格选项
      特小屏幕 小屏幕 中等屏幕 大屏幕 特大屏幕
    类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
    屏幕宽度 <576px ≥576px ≥768px ≥992px ≥1200px
    假设我们有一个包含两列的简单布局;我们希望所有设备的列拆分为25%/ 75%。
    我们将以下类添加到我们的两列中:
    <div class="col-3">...</div>
    <div class="col-9">...</div>
    
    以下示例将所有设备(超小,小,中,大和超大)的分配比例为 25%/75%。
    <div class="container-fluid">
      <div class="row">
        <div class="col-3 bg-success">
          col-3
        </div>
        <div class="col-9 bg-warning">
          col-9
        </div>
      </div>
    </div>
    
    输出结果如下:
    col-3
    col-9
    注意:注确保总和等于或少于12(不需要使用所有12个可用列)。
    对于 33.3%/66.6% 的拆分,您将使用 .col-4.col-8;对于 50%/50% 的拆分,您将使用 .col-6.col-6
    <-- 33.3%/66.6% 的拆分 -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-4 bg-success">
          col-4
        </div>
        <div class="col-8 bg-warning">
          col-8
        </div>
      </div>
    </div>
    <-- 50%/50% 的拆分 -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-6 bg-success">
          col-6
        </div>
        <div class="col-6 bg-warning">
          col-6
        </div>
      </div>
    </div>
    
    输出结果如下:
    col-4
    col-8
    col-6
    col-6
  • 自动布局列

    Bootstrap 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col- * 中删除数字,并且仅对指定数量的 col 元素使用 .col 类。
    Bootstrap 将识别出有多少列,并且每列将具有相同的宽度:
    <!-两列:宽度为50%->
    <div class="row">
      <div class="col bg-success">1 of 2</div>
      <div class="col bg-warning">2 of 2</div>
    </div>
    <!-四列:宽度为25%->
    <div class="row">
      <div class="col bg-success">1 of 4</div>
      <div class="col bg-warning">2 of 4</div>
      <div class="col bg-success">3 of 4</div>
      <div class="col 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