Bootstrap如何禁止響應式布局


Bootstrap 會自動幫你針對不同的屏幕尺寸調整你的頁面,使其在各個尺寸的屏幕上表現良好。下面我們列出了如何禁用這一特性,就像這個非響應式布局實例頁面一樣。

禁止響應式布局有如下幾步:

  1. 移除 此 CSS 文檔中提到的設置瀏覽器視口(viewport)的標簽:<meta>
  2. 通過為 .container 類設置一個 width 值從而覆蓋框架的默認 width 設置,例如 width: 970px !important; 。請確保這些設置全部放在默認的 Bootstrap CSS 文件的后面。注意,如果你把它放到媒體查詢中,也可以略去!important 。
  3. 如果使用了導航條,需要移除所有導航條的折疊和展開行為。
  4. 對於柵格布局,額外增加 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。 不要擔心,針對超小屏幕設備的柵格系統能夠在所有分辨率的環境下展開。

針對 IE8 仍然需要額外引入 Respond.js 文件(由於仍然利用了瀏覽器對媒體查詢(media query)的支持,因此還需要做處理)。這樣就禁用了 Bootstrap 對移動設備的響應式支持。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM