Bootstrap 會自動幫你針對不同的屏幕尺寸調整你的頁面,使其在各個尺寸的屏幕上表現良好。下面我們列出了如何禁用這一特性,就像這個非響應式布局實例頁面一樣。
禁止響應式布局有如下幾步:
- 移除 此 CSS 文檔中提到的設置瀏覽器視口(viewport)的標簽:
<meta>
。 - 通過為
.container
類設置一個width
值從而覆蓋框架的默認 width 設置,例如width: 970px !important;
。請確保這些設置全部放在默認的 Bootstrap CSS 文件的后面。注意,如果你把它放到媒體查詢中,也可以略去!important
。 - 如果使用了導航條,需要移除所有導航條的折疊和展開行為。
- 對於柵格布局,額外增加
.col-xs-*
類或替換掉.col-md-*
和.col-lg-*
。 不要擔心,針對超小屏幕設備的柵格系統能夠在所有分辨率的環境下展開。
針對 IE8 仍然需要額外引入 Respond.js 文件(由於仍然利用了瀏覽器對媒體查詢(media query)的支持,因此還需要做處理)。這樣就禁用了 Bootstrap 對移動設備的響應式支持。