4.Bootstrap(中文教程)网格系统：垂直对齐

一.垂直对齐父元素

<div class="container" id="demo">  <div class="row align-items-start">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</span></div>    <div class="col-4"><span>3</span></div>  </div>  <div class="row align-items-center">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</span></div>    <div class="col-4"><span>3</span></div>  </div>  <div class="row align-items-end">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</span></div>    <div class="col-4"><span>3</span></div>  </div></div>#demo.container,#demo.container-fluid{  background: #054bd1;/*蓝*/  height: 100vh;  color: white;}#demo.container .row{  background: #021d51;/*深蓝*/  boder-bottom: 1px solid #000;  height: 30vh;}#demo.container .row > div > span{  display: block;  background: #487bdd;/*浅蓝*/  color: white;  font-size: 32px;  padding: 8px;  border: 1px solid #021d51;/*深蓝*/}

重点：
1.先设定row的高度
2.父元素垂直对齐上(align-items-start)
3.父元素垂直对齐中(align-items-center)
4.父元素垂直对齐下(align-items-end)

codepen

二.垂直对齐单一row里面的col

<!-- 先设定row的高度 --><div class="container" id="demo"><!--   父元素垂直对齐上 -->  <div class="row align-items-center">    <div class="col-4 align-self-start"><span>1</span></div>    <div class="col-4 align-self-center"><span>2</span></div>    <div class="col-4 align-self-end"><span>3</span></div>  </div></div>#demo.container,#demo.container-fluid{  background: #054bd1;/*蓝*/  height: 100vh;  color: white;}#demo.container .row{  background: #021d51;/*深蓝*/  boder-bottom: 1px solid #000;  height: 30vh;}#demo.container .row > div > span{  display: block;  background: #487bdd;/*浅蓝*/  color: white;  font-size: 32px;  padding: 8px;  border: 1px solid #021d51;/*深蓝*/}

重点：
1.先设定row的高度
2.col垂直对齐上(align-self-start)
3.col垂直对齐中(align-self-center)
4.col垂直对齐下(align-self-end)
5.影片中的row有加align-items-center，在Bootstrap官网就没有加了

codepen
参考：bootstrap4