用 Bootstrap 3 製作高度相同的 div (column)

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

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


使用 flex 讓 column 高度相同

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

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

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

CSS

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

使用 table 讓 column 高度相同

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

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

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

CSS

☞ 補充

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

以上兩種方法好記又方便,如果搭配 Bootstrap,也不需要增加額外的 DIV 標籤,希望大家會喜歡囉~

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團