Bootstrap 网格堆叠到水平



  • 定义和使用

    我们将创建一个基本的网格系统,该系统首先堆叠在超小型设备上,然后在大型设备上变为水平。
    下面的示例显示了一个简单的“堆叠到水平”两列布局,这意味着它将在所有屏幕上拆分 50%/50%,除了超小的屏幕外,它将自动堆叠(100%)
    <div class="container">
      <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-6
    col-sm-6
    提示:.col-sm- * 类中的数字表示 div 应该跨越多少列(共12列); 因此,.col-sm-1 跨越1列,.col-sm-4 跨越4列,.col-sm-6 跨越6列,依此类推。
    注意:注确保总和等于或少于12(不需要使用所有12个可用列)。
    通过将 .container 类更改为 .container-fluid,可以将任何固定宽度的布局转换为全屏宽度布局:
    <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>
    
  • 自动布局列

    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