[Bootstrap 補充技巧] Bootstrap 讓 Grid 的項目 column 能夠等高

怎麼讓 Bootstrap 的 Grid 的 column 等高呢?! 好奇怪感覺這需求應該很早就應該出現，結果我這幾天才發現到..

舉個例子，如果你每個 column 內容不一致，那麼每個 Row 的內容高度也會不一致:

(我用 jsbin 來寫 sample code)，會向右邊那樣，我預期希望黃色跟藍色的區塊可以跟紅色的等高：

後來 Google 發現有人幫我處理好這個好用的功能了，他是利用 display 的 flex 的屬性來達到每個 column 等高，請參考 http://getbootstrap.com.vn/examples/equal-height-columns/。 用法文件寫得很清楚，要引用這個作者寫的 .row-eq-name 樣式 ，然後在需要等高的 row 上附加這個 class name .row-eq-height 

Example: <div class="row"> 加上 row-eq-height <div class="row row-eq-height">

jsbin 範例

注意事項

* Flex 只支援到 IE 10

* .row-eq-height 可能會改變原本的 column wrap 的行為，所以還是得取捨，至於差別在哪，你多測測 螢幕小一點的時候就知道了，原本設定的 column 變化可能會因為 row-eq-height 而有點不同哦!