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

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


留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源