Bootstrap 小屏幕网格



  • 定义和使用

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

    Bootstrap 中,有一种简单的方法可以为所有设备创建等宽的列:只需从 .col-sm-* 中删除数字,并且仅对指定数量的 col 元素使用 .col-sm 类;Bootstrap 将识别出有多少列,并且每列将具有相同的宽度
    如果屏幕尺寸<576px,则这些列将水平堆叠:
    <!-两列:所有屏幕上的宽度均为50%,但超小(100%宽度)除外->
    <div class="row">
      <div class="col-sm bg-success">1 of 2</div>
      <div class="col-sm bg-warning">2 of 2</div>
    </div>
    <!-四列:所有屏幕上25%的宽度,除了超小(100%宽度)->
    <div class="row">
      <div class="col-sm bg-success">1 of 4</div>
      <div class="col-sm bg-warning">2 of 4</div>
      <div class="col-sm bg-success">3 of 4</div>
      <div class="col-sm 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