16. 無間隔+直角邊框

一、取消欄位間間隔

1. 在 BootStrap4 中可以透過 .no-gutters 來取消間隔

   <div class="container">
       <div class="row no-gutters">
           <div class="col">col 等寬 1/3</div>
           <div class="col">col 等寬 2/3</div>
           <div class="col">col 等寬 3/3</div>
       </div>
   </div>

二、滿版按鈕

1. 滿版按鈕，可以加入 .btn-block 使按鈕變成滿版，例如：

   <a href="#" class="btn btn-green btn-block">新生入學專區</a>

2. 上面的 .btn-green 是用自定義按鈕工具：http://blog.koalite.com/bbg/ 做出來的。

3. 利用間隔工具 .p-3 讓按鈕間變大一點，並利用 .mb-1 在按鈕下方加點距離。

   <div class="container">
       <div class="row no-gutters">
           <div class="col-sm-6"><a href="#" class="btn btn-green btn-block p-3 mb-1">106年度教育部技職校院教學卓越計畫10年成果展</a></div>
           <div class="col-sm-6"><a href="#" class="btn btn-green btn-block p-3 mb-1">新生入學專區</a></div>
       </div>
   </div>

4. 按鈕詳情：http://bootstrap.hexschool.com/docs/4.0/components/buttons/

三、直角及邊框

1. 若想讓按鈕變成直角，可利用 .rounded-0 來設定之，例如：

   <a href="#" class="btn rounded-0 btn-green2 btn-block p-3 mb-1">本國學生招生</a>

2. 若是想替按鈕加上邊框，可加上 .border-white 將框線設為白色，並用 .border-top-0 指定上方不用框線。

   <a href="#" class="btn btn-green btn-block p-3 mb-1 rounded-0 border-white border-top-0">新生入學專區</a>

3. 詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/borders/