[學習筆記] Bootstrap4 Grid System

在 Bootstrap4 的 Layout 使用的是 CSS flexbox 來達到排版的效果，因此建議可以先瞭解 flexbox 屬性的，flex-container 和 flex-items 的意義，將能夠更快理解 Bootstrap4。

以下內容整理自 Bootstrap 官方網站 Grid System。羅列我認為幾個比較重要的概念，如果時間允許的話，建議還是閱讀官方文件。

基本使用

<!--  html  -->
.container>.row>.col-sm{lorem}*3

• Container 提供基本的方式來置中你的內容，使用 .container 當你的容器寬度是固定的；如果想要滿版寬，則使用.container-fluid。
• Rows 是列的意思，用來包住裡面的 Columns 以確保每欄可以排列適當。
• 內容則是放在 Columns 裡面，也就是 .row>.col-sm{內容} 這樣的結構
• 一共可以設定 5 種不同的斷點（breakpoints）

Size	BreakPoint	Class Prefix
Extra small	< 576px	.col-
Small	≥ 576px	.col-sm-
Medium	≥ 768px	.col-md-
Large	≥ 992px	.col-lg-
Extra large	≥ 1200px	.col-xl-

grip options @ Bootstrap

隨著內容變動寬度

使用 col-{breakpoint}-auto 同時搭配上 horizontal alignment 可以讓 column 的寬度隨著內容而改變。

variable width content @ Bootstrap

取消間距（gutters）

在預設的情況下，每一個欄（column）之間都會有間隙（gutter），透過在 .row 上加上 .no-gutters 可以去除：

• 欄和欄之間的 padding，預設是padding: 0 15px；
• 每一 row 外圍包住的 margin， 預設是 margin: 0 -15px。

<!--  html  -->
.container>.row.no-gutters>.col*3

在 row 中換行

當我們想要在 .row 裡面達到換行效果的時候，我們可以在一個空的 column 上使用 .w-100：

<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>

Equal-width Multi-row @ Bootstrap

指定 column 的寬度

由於使用的是 flexbox 來排版的緣故，預設每個 cloumn （.col-<size>）就會是等寬的，但是如果你希望能夠自行設定可以使用 .col-<size>-<number>:

<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

在不同螢幕尺寸上有不同寬度

我們可以在同一個 column 上給多的 class 來讓頁面在不同螢幕尺寸時有不同的排版：

<!-- 
  - 當螢幕尺寸為 md 以上時會有 8:4 來顯示 
  - 當螢幕尺寸為 sm 時會以 4:8 來顯示
  - 當螢幕尺寸小於 sm 時會換行顯示
-->
<div class="row">
  <div class="col-sm-4 col-md-8">.col-sm-4 .col-md-8</div>
  <div class="col-sm-8 col-md-4">.col-sm-8 .col-md-4</div>
</div>

使用 clearfix

我們可以在 row 裡面使用 .clearfix

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix"></div>
  
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

給空的內容（offset, push）

如果在兩欄之中我們想要增加空欄，我們可以不必用空的 div ，而是使用 .offset-<size>-<number> 的 class 就能製造空欄的效果

<!--
  - sm 時會有兩個單位的空欄
  - md 以上時則不會有空欄
  -->
<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

交換 item 的內容

使用 .push-md-* 和 .pull-md-* 可以達到在特定螢幕尺寸下交會 items 的效果：

<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>

對齊（alignment）

垂直對齊

在 row 上

可以在 .row 的 class 加上：

• align-items-start
• align-items-center
• align-items-end

<!--  html  -->
.container>.row.align-items-start>.col{one of three columns}*3

在 column 上

可以在 .col- 的 class 加上：

• align-self-start
• align-self-center
• align-self-end

<!--  html  -->
.container>.row>.col.align-self-start+.col.align-self-center+.col.align-self-end

vertical alignment @ bootstrap

水平對齊（horizontal alignment）

可以在 .row 的 class 加上：

• justify-content-start
• justify-content-center
• justify-content-end
• justify-content-around
• justify-content-between

<!--  html  -->
.container>.row.justify-content-start>.col*3

資料來源

Grid System @ Bootstrap