justify-content-{around | between | start | center | end }内容对齐 - bootStrap4常用CSS笔记（2019-05-16 09:38）
bootStrap4中内容对齐有五种模式：
1 justify-content-{around | between | start | center | end}
该样式必须和一个容器对像一起调用，否则无效，比如：
1 <div class="row justify-content-around bg-light">...
五种对齐样式，见下图：
示例代码：
1 <style> 2 h3 { 3 padding-top: 30px; 4 font-size: 18px; 5 } 6 .a { 7 width:50px; 8 height: 50px; 9 text-align: center; 10 line-height: 50px; 11 color: #fff; 12 } 13 </style> 14 <div class="container"> 15 <h3>justify-content-around：</h3> 16 <div class="row justify-content-around bg-light"> 17 <div class="a bg-primary">1</div> 18 <div class="a bg-danger">2</div> 19 <div class="a bg-warning">3</div> 20 <div class="a bg-success">4</div> 21 </div> 22 <h3>justify-content-between：</h3> 23 <div class="row justify-content-between bg-light"> 24 <div class="a bg-primary">1</div> 25 <div class="a bg-danger">2</div> 26 <div class="a bg-warning">3</div> 27 <div class="a bg-success">4</div> 28 </div> 29 <h3>justify-content-start：</h3> 30 <div class="row justify-content-start bg-light"> 31 <div class="a bg-primary">1</div> 32 <div class="a bg-danger">2</div> 33 <div class="a bg-warning">3</div> 34 <div class="a bg-success">4</div> 35 </div> 36 <h3>justify-content-center：</h3> 37 <div class="row justify-content-center bg-light"> 38 <div class="a bg-primary">1</div> 39 <div class="a bg-danger">2</div> 40 <div class="a bg-warning">3</div> 41 <div class="a bg-success">4</div> 42 </div> 43 <h3>justify-content-end：</h3> 44 <div class="row justify-content-end bg-light"> 45 <div class="a bg-primary">1</div> 46 <div class="a bg-danger">2</div> 47 <div class="a bg-warning">3</div> 48 <div class="a bg-success">4</div> 49 </div> 50 </div>
