bootstrap取消自適應(yīng)的方法

這篇文章主要介紹了bootstrap取消自適應(yīng)的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

bootstrap取消自適應(yīng)的方法：1、去掉頭部“<meta name="viewport" content="width=device-width, initial-scale=1.0”>”；2、設(shè)置.container寬度即可。

禁用bootstrap響應(yīng)式解決方法

前幾天接到一個任務(wù)，用bootstrap框架寫幾個靜態(tài)頁面，由于長時間專注于后臺開發(fā)，所以，花費了3天時間，才終于寫完了頁面，其中，來回的修改，把遇到的問題說一下。

用bootstarp做完頁面后，組長當(dāng)時又改變主意了，說不用bootstrap，或者禁用bootstrap響應(yīng)式，沒辦法，只有禁用響應(yīng)式，花費時間最短了，去bootstrap官網(wǎng)上看，禁用響應(yīng)式的話，第一：去掉頭部<meta name="viewport" content="width=device-width, initial-scale=1.0”>。第二：設(shè)置.container寬度，比如：

container{
width: 1170px;
max-width: none !important;
}

第三：采用.col-xs-（最小設(shè)備柵格類）的樣式來代替.col-md-以及.col-lg-*。

但是，此時問題并沒有結(jié)束。

現(xiàn)在給container一個固定寬度,白色背景的導(dǎo)航條寬度可以鋪滿瀏覽器，但是，隨著屏幕變小，導(dǎo)航條白色背景就不能鋪滿瀏覽器變小后的寬度！還有就是我的輪播圖也是要求鋪滿瀏覽器寬度，現(xiàn)在也變得居中顯示了，心里想，早知道就不用bootstrap了，難道我現(xiàn)在還有重寫頁面？上網(wǎng)查了一下，沒有找到解決方法，后來，靈機一動，我可以給body一個寬度啊，或者給導(dǎo)航條和輪播圖分別也設(shè)置相同的寬度，這個時候的問題，就是，設(shè)置多少寬度合適?。堪l(fā)現(xiàn)，不能這樣做！

最后，用火狐調(diào)試代碼的時候，無意之間發(fā)現(xiàn)了這個好東西，@media ，但是，我自己設(shè)置了，在瀏覽器上沒反應(yīng)，無語了，最后，花費了一點時間發(fā)現(xiàn)這個樣式?jīng)]寫對。

所以，解決導(dǎo)航條和輪播圖響應(yīng)式問題的，第四點就是：

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}

他的意思就是，當(dāng)屏幕小于1400px的時候，把body寬度設(shè)置為1400px.不知道的讀者可以上網(wǎng)學(xué)習(xí)一下，這可是一個好東西！

最后，說一下，top指的是position絕對定位時的top。關(guān)于對span設(shè)置寬度和高度是沒有作用的，他不是塊級元素，div是塊級元素，span是行內(nèi)元素。如果想用span實現(xiàn)下圖中的按鈕，只需要根據(jù)需要設(shè)置padding即可。(padding:20px 20px等)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享bootstrap取消自適應(yīng)的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!