排版網頁時，常常會碰到的一個需求，就是希望左右欄位的高度可以相同。而讓欄位的高度相同已經不是什麼新奇的事了，所以今天要分享的是，當你使用 Bootstrap Grid 製作網頁時，該如何將這個效果套用在 Bootstrap 裡。

會想分享這樣的內容，也是因為之前在上「RWD 入門與實戰」課程時，有同學問過這樣的問題。所以就寫成一篇文章分享給大家囉！

使用 flex 讓 column 高度相同

第一個最簡單的方法，就是使用 display: flex 讓所有欄位的高度相同。但 flex 有一個令人哀傷的事實：他不支援 IE9 以下的瀏覽器。但我想 flex 一定是未來排版的主流，所以一樣分享給大家。

你可以從範例語法的 Before 以及 After 看到前後差異。

而我只有在 row 裡面加上一行語法，即可做到該效果：

.row {
  display: flex;
}

正常情況下，Bootstrap 一行最多容納 12 columns，但如果使用 display: flex，同一個 row 的 col-* 總數超過了 12，他們一樣會維持在同一行內，寬度也會自動均分。這是除了瀏覽器相容外，還需要特別注意的一件事。

使用 table 讓 column 高度相同

古早以前如果希望欄位的高度相同，用 table 不失為一個好方法，雖然現在我們不再使用表格做排版，但依然可以使用 display: table 將所有標籤的型態作轉換。

此外 display: table 的瀏覽器支援度很好，雖然語法較多，但是考量到 IE9 以下的兼容的話，推薦大家使用該方法。

Bootstrap 有 row 以及 column 的設定，所以在結構上很適合加入 display: table ，不需要再給予多餘的 DIV：

.row {
  display: table;
  width: 100%;
}

.row [class^=col-] {
  display: table-cell;
  float: none;
}

補充

• 使用 display: table 後，寬度會等於行內元素(inline elements)，因此記得要加上 width: 100%; ，讓寬度等於父層的寬度。
• 記得在 col-* 將所有浮動給移除 (float: none)，不然 display: table 不會有作用。

以上兩種方法好記又方便，如果搭配 Bootstrap，也不需要增加額外的 DIV 標籤，希望對各位有幫助。

1

發生錯誤。