網頁設計, 網頁資源

Bootstrap必知!內建clearfix解決網格DIV區塊長短腳問題

梅干 2016/05/10
梅問題-Bootstrap必知!內建clearfix解決網格區塊長短腳問題
  有用過Bootstrap的朋友,應該對於Bootstrap的Grid System網格系統,感到相當的便利,只需透過css類別的指定後,就可快速的將畫面分割成所需的版型,而這些區塊的比例,Bootrap早已都計算好了,但這些區塊為能隨著裝置解析不同,而跟著作堆疊,因此都是用浮動靠齊的方式,因此在網格系統中的每一個DIV的高度都要一致,當今天有長有短時,就會造成跑版,因此先前梅干也分享一篇DIV區塊等高的作法,除此之外Bootstrap內建也有相關的屬性可設定,只要加入clearfix後,就可解決區塊長短腳,造成區塊跑版的問題啦!至於怎麼做現在也一塊來看看囉!

Step1
透過Bootstrap的網格系統後,可快速的將版型,分割成所需的數量,但區塊中的內容,若長度不一時,就會造成跑版的問題。
梅問題-Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step2
這時只需在每個區間下,加入clearfix的div區塊,就可解決此問題啦!
梅問題-Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step3
重新整理後,梅干這邊特別加了紅框,可看到剛加入的DIV會把區塊包覆起來,但在手機版時,就會多了一塊空白。
梅問題-Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step4
接著在剛的div後方,再加hidden-xs,讓在手機版時不顯示此區塊。
梅問題-Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step5
設定完成後,就只會在桌機版才會顯示,切換到手機版時,就會被隱藏起來,因此在手機版就不會再多一塊空白啦!
梅問題-Bootstrap必知!內建clearfix解決網格區塊長短腳問題