学习日志

栅格布局

一行有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>

学习感受

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