5.Bootstrap(中文教程)网格系统：水平对齐

一.水平对齐

<div class="container" id="demo">  <div class="row justify-content-start">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</span></div>  </div>  <div class="row justify-content-center">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</span></div>  </div>  <div class="row justify-content-end">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</span></div>  </div>  <div class="row justify-content-between">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</span></div>  </div>  <div class="row justify-content-around">    <div class="col-4"><span>1</span></div>    <div class="col-4"><span>2</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.justify-content-start很像float置左
(flexbox属性: justify-content: flex-start!important;)
2.justify-content-center很像float置中
(flexbox属性: justify-content: flex-center!important;)
3.justify-content-end很像float置右
(flexbox属性: justify-content: flex-end!important;)
4.justify-content-between中间空一大格， 左右的col往旁边靠
(flexbox属性: justify-content: space-between!important;)
5.justify-content-around看起来就是左右固定平均的内留白
(flexbox属性: justify-content: space-around!important;)

codepen
参考：bootstrap4