10-2 水平對齊

1. 靠左對齊 .justify-content-start

   <div class="container">
       <div class="row justify-content-start">
           <div class="col-2">col 1/3</div>
           <div class="col-2">col 2/3</div>
           <div class="col-2">col 3/3</div>
       </div>
   </div>

2. 置中對齊 .justify-content-center

   <div class="container">
       <div class="row justify-content-center">
           <div class="col-2">col 1/3</div>
           <div class="col-2">col 2/3</div>
           <div class="col-2">col 3/3</div>
       </div>
   </div>

3. 靠右對齊 .justify-content-end

   <div class="container">
       <div class="row justify-content-end">
           <div class="col-2">col 1/3</div>
           <div class="col-2">col 2/3</div>
           <div class="col-2">col 3/3</div>
       </div>
   </div>

4. 分散對齊（含左右） .justify-content-around

   <div class="container">
       <div class="row justify-content-around">
           <div class="col-2">col 1/3</div>
           <div class="col-2">col 2/3</div>
           <div class="col-2">col 3/3</div>
       </div>
   </div>

5. 分散對齊（不含左右） .justify-content-between

   <div class="container">
       <div class="row justify-content-between">
           <div class="col-2">col 1/3</div>
           <div class="col-2">col 2/3</div>
           <div class="col-2">col 3/3</div>
       </div>
   </div>

6. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/#%E6%B0%B4%E5%B9%B3%E5%B0%8D%E9%BD%8A
7. 範例：

   See the Pen 水平對齊 by Tad (@tad0616) on CodePen.