1. 程式人生 > >Bootstrap禁用響應式佈局

Bootstrap禁用響應式佈局

Bootstrap中極其重要的一個技術內容便是響應式佈局了,一次編碼針對不同裝置終端的強大能力使得響應式技術愈發流行。 不過正所謂“蘿蔔青菜各有所愛”,如果你想要使用Bootstrap開發自己的專案卻又恰巧不太喜歡響應式佈局(或者你所設計的頁面佈局不允許你使用響應式技術),那麼你可以通過以下方式禁用響應式佈局

移除標籤

禁用第一步,就是需要移除在head標籤中新增的 <meta name="viewport" content="width=device-width, initial-scale=1.0”> 該標籤的作用在於使得你的網站在移動裝置端被訪問的時候,不會進行縮放,而是以100%的比例顯示在移動裝置中。

設定寬度

禁用第二步,為.container類設定一個寬度,從而覆蓋它根據裝置寬度而自動調節的功能。 例如你可以設定.container {width: 980px;},為了起到覆蓋原bootstrap樣式的作用,最好將你自定義的css檔案在bootstrap.css檔案之後引入。

刪除選單摺疊

倘若你採用了導航欄,那麼就要注意刪掉選單在移動端的摺疊樣展開式(主要通過button的navbar-toggle來實現)。

柵格佈局

除此之外,如果你採用了柵格佈局,那麼就要採用.col-xs-*(最小裝置柵格類)的樣式來代替.col-md-*以及.col-lg-*,這樣就能確保柵格能夠在所有裝置中展開。