Bootstrap 4 的 Grid 應用介紹

第二頁

水平對齊

有垂直對齊就一定會有水平對齊(廢話XD),所以 Bootstrap 4 一樣利用了 Flexbox 的特性實現水平對齊。

  • justify-content-start:靠左對齊
  • justify-content-center:置中對齊
  • justify-content-end:靠右對齊
  • justify-content-around:分散對齊(含左右)
  • justify-content-between:分散對齊(不含左右)
<div class="row justify-content-start">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-center">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-end">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-around">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>
<div class="row justify-content-between">
  <div class="col-2">A</div>
  <div class="col-2">B</div>
  <div class="col-2">C</div>
</div>

範例

See the Pen MvEpYy by MUKi (@mukiwu) on CodePen.


移除 gutter

Bootstrap 的rowcolumn分別有使用margin以及padding當作 gutter,讓每個 column 之間有呼吸的空間。

但有時候因為版面的設計需求,我們希望 column 是緊密黏在一起的,所以 V4 新增了no-gutters這個 class,可以讓我們移除 gutter

<div class="row no-gutters">
  <div class="col">A</div>
  <div class="col">B</div>
</div>

直接將no-gutters放在row就可以囉,因為語法跟效果很直覺,所以就不上 codepen 範例惹(絕對不是因為懶)


Column 排序

以前如果要將排序會用pullpush在那邊推來推去的,現在一樣因為使用了 Flexbox 的關係,在使用上也更方便了!

  • flex-unordered:不排序
  • flex-first:第一個
  • flex-last:最後一個
<div class="row">
  <div class="col flex-unordered">
    我應該是第一個,但我不排序
  </div>
  <div class="col flex-last">
    我應該是第二個,但我會排在最後
  </div>
  <div class="col flex-first">
    我應該是第三個,但我會排在最前面
  </div>
</div>  

範例

See the Pen wqrJEa by MUKi (@mukiwu) on CodePen.

這邊要特別注意的是,如果使用 flex 排序,寬度縮小時也會持續這個排序模式,column 的寬度不會變回 100%。

如果你希望縮小到特定寬度可以變回 100%,還是可以使用 V3 的push以及pull,不過在 V4 的寫法有一點調整,將前綴位置放到後面(原本是col-md-push-*):

<div class="row">
  <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
  <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

☞補充:offset也一樣將前綴往後放,但使用方法相同所以就不特別介紹了。


Bootstrap 4 的 Grid 介紹就到此告一段落囉,有一些功能我沒有特別提到,例如 Wrapping、Nested,是因為跟 V3 相比沒有太大的改變,就不額外寫出來了。

Bootstrap 的功能非常強大,是一個堪稱超完整的 Framework,但我自己只有使用它的 Grid System,所以就只介紹 Grid 在 V3 與 V4 之間的差異囉 ^Q^。以後如果再開 RWD 課程,也會以 V4 為主要規劃設計新的範例與課程,也請大家敬請期待 😀

那麼對文章有任何不懂的地方,也歡迎留言告訴我唷,謝謝 ^_^