bootstrap4.0

• 支持栅格系统

  <div class="container">
      <div class="row">
        <div class="col-md-4 col-sm-6 col-12">
          One of three columns
        </div>
        <div class="col-md-4 col-sm-6 col-12">
          One of three columns
        </div>
        <div class="col-md-4 col-sm-6 col-12">
          One of three columns
        </div>
      </div>
    </div>

image.png
image.png
image.png image.png

可以设置offset-md-3距离左边的距离，可根据情况调整。

• w-100能把内容分成两行

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

image.png

• 设置一列宽，其他自适应

  <div class="container">
      <div class="row">
        <div class="col">
          One of three columns
        </div>
        <div class="col-md-8 col-sm-6 col-12">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
    </div>

image.png
image.png
image.png

• col-{breakpoint}-auto根据内容的自然宽度调整列的大小

 <div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

image.png image.png

• 使用flexbox对齐实用程序垂直和水平对齐列。

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

在官网中这段代码并不能实现官网中出现的效果，为什么呢？因为没有设置css样式

    .row{
      height: 300px;
      border:1px solid orange;
    }
    .row div{
      background-color: skyblue;
      height: 100px;
      border:1px solid #eee;
    }

设置之后就有效果了

image.png

实际上这里用到的是flex布局的align-items:center;``align-items:flex-start;``align-items:flex-end;

image.png

模板http://note.youdao.com/noteshare?id=be084627b5d19f550c4aa5855b4cac1b
官网https://v4.bootcss.com/docs/4.0/getting-started/introduction/