Bootstrap 网格



  • 网格系统

    Bootstrap 的网格系统是使用 flexbox 构建的,并且整个页面最多允许 12 列。
    如果不想单独使用全部 12 列,则可以将这些列组合在一起以创建更宽的列:
    span 1
    span 1
    span 1
    span 1
    span 1
    span 1
    span 1
    span 1
    span 1
    span 1
    span 1
    span 1
    span 4
    span 4
    span 4
    span 4
    span 8
    span 6
    span 6
    span 12
    网格系统是响应式的,列将根据屏幕大小自动重新排列。
    确保总和不超过12个(不需要使用所有12个可用列)。
  • 网格类别

    Bootstrap 网格系统具有五类:
    • .col-(超小型设备-屏幕宽度小于576px)
    • .col-sm-(小型设备-屏幕宽度等于或大于576px)
    • .col-md-(中等设备-屏幕宽度等于或大于768px)
    • .col-lg-(大型设备-屏幕宽度等于或大于992px)
    • .col-xl-(xlarge设备-屏幕宽度等于或大于1200px)
    可以将上述类组合在一起以创建更多动态和灵活的布局。
    提示:每个类都按比例增加,因此,如果您希望为 sm 和 md 设置相同的宽度,则只需指定 sm。
  • 网格的基本结构

    下面示例演示了 Bootstrap 网格的基本结构:
    <!-控制列宽以及它们在不同设备上的显示方式->
    <div class="row">
       <div class="col-*-*"></div>
       <div class="col-*-*"></div>
    </div>
    <div class="row">
       <div class="col-*-*"></div>
       <div class="col-*-*"></div>
       <div class="col-*-*"></div>
    </div>
    <!-或者让Bootstrap自动处理布局->
    <div class="row">
       <div class="col"></div>
       <div class="col"></div>
       <div class="col"></div>
    </div>
    
    第一个示例:创建一行(<div class="row">)。 然后,添加所需的列数(带有适当的 .col-*-* 类的标签)。 第一个星号(*)代表响应度:sm,md,lgxl,而第二个星号则代表一个数字,每行总计为 12。
    第二个示例:让引导程序处理布局,而不是给每个 col 添加数字,以创建相等宽度的列:两个 "col" 元素=每个 col 的宽度为 50%。 三个列=每个列的宽度为 33.33%。 四个 cols = 25% 的宽度等。您还可以使用 .col-sm | md | lg | xl 使列具有响应性。
  • 三列相等

    .col
    .col
    .col
    以下示例显示如何在所有设备和屏幕宽度上创建三个等宽列:
    <div class="row">
       <div class="col">.col</div>
       <div class="col">.col</div>
       <div class="col">.col</div>
    </div>
    
  • 响应列

    .col-sm-3
    .col-sm-3
    .col-sm-3
    .col-sm-3
    以下示例显示了如何创建四个等宽列,这些列从平板电脑开始并扩展到超大型桌面。 在宽度 <576px 的手机或屏幕上,这些列将自动堆叠在一起:
    <div class="row">
       <div class="col-sm-3">.col-sm-3</div>
       <div class="col-sm-3">.col-sm-3</div>
       <div class="col-sm-3">.col-sm-3</div>
       <div class="col-sm-3">.col-sm-3</div>
    </div>
    
  • 两个不相等的响应列

    .col-sm-4
    .col-sm-8
    以下示例显示如何获取两个不同宽度的列,这些列从平板电脑开始并扩展到大型额外的台式机:
    <div class="row">
       <div class="col-sm-4">.col-sm-4</div>
       <div class="col-sm-8">.col-sm-8</div>
    </div>