20201102冯佳丽

学习日志

栅格布局

一行有12列,可以分割,可以嵌套。

col-md-auto:内容的自然宽度来调整列的大小。
w-100:创建跨多行的等宽列
offset-md-3:改变偏移量
案例
    <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-6 col-lg-4 " style="border: red solid 1px;">
            One of three columns
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4" style="border: red solid 1px;">
            One of three columns
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4" style="border: red solid 1px;">
            One of three columns
          </div>
        </div>
      </div>

注:不同的屏幕中下呈现不同的布局。

​ 此案例中:

​ 小屏是一列,每个内容占满了12个格子:col-sm-12

​ 中屏是两列,每个内容占满了6个格子:col-md-6

​ 大屏是三列,每个内容占满了4个格子:col-md-4

​ 如果不进行制定宽度,就等比例分配,直到分配完12列就另一行

案例:(两行两列)
<div class="container">
  <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>
案例:(3列n行)

注:此行不指定的情况下是等份的,也可以指定,但是要按照等份规则指定

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
      ...
  </div>
</div>
案例:(改变便宜量)
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

学习感受

响应式布局非常灵活,用户体验户很高。

标签

评论

this is is footer