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

梅問題-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解決網格區塊長短腳問題

相關文章

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Mobirise」不懂網頁語法,拖拉就可完成精美、酷炫的RWD網頁工具

「Animate.css」讓Boostrap導覽列的下拉選單動起來

「Animate.css」讓Boostrap導覽列的下拉選單動起來

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

Bootstrap教學-「TouchCarousel」讓廣告輪播支援手指滑動切換

Bootstrap教學-「TouchCarousel」讓廣告輪播支援手指滑動切換





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。