Bootstrap - Grid system 简单的行列样式

wednesdaydream
403 阅读1分钟
  • Grid system 主要是用来设置行数、列数和列宽

参考：getbootstrap.com/docs/5.3/la…

设置行数与列数不随视口尺寸变化

每列等宽

  • 根据代码，自动生成行数和列数，较不灵活

    <div class="container text-center">
  <div class="row">     
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

  • 手动设置每行显示几列：

    <div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

每列不等宽

  • 在 col 后跟一个数字，Bootstrap 将每行分割为12列，数字代表占据了十二分之几 
    <div class="container text-center">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

设置行数与列数随视口尺寸变化

  • 设置某个视口尺寸的范围，符合这个范围时，设置一套规则；不在这个范围时，设置另一套规则。

    • image.png

  • 如下例的第一部分，意思是符合 sm 这个视口尺寸范围时，按照 8:4 分配宽度；不符合时，将两列堆叠成一列

    <div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

如果不想将所有列堆叠成一列，可以自行设置规则

  • 如下例，不符合 md 所代表的视口范围时，所有的列按照 col-6 （每行两列，宽度各占50%）进行布局；符合 md 所代表的视口范围时，按照 col-4 （每行三列，宽度各占 4/12=33.3%）布局 
    <div class="container text-center">
  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
</div>
avatar
文章
阅读
粉丝