關於禁用bootstrap響應式解決方法

前幾天接到一個任務，用bootstrap框架寫幾個靜態頁面，因爲長時間專一於後臺開發，因此，花費了3天時間，才終於寫完了頁面，其中，來回的修改，把遇到的問題說一下。

 

用bootstarp作完頁面後，組長當時又改變主意了，說不用bootstrap，或者禁用bootstrap響應式，沒辦法，只有禁用響應式，花費時間最短了，去bootstrap官網上看，禁用響應式的話，第一：去掉頭部<meta name="viewport" content="width=device-width, initial-scale=1.0」>。第二：設置.container寬度，好比：
container{
width: 1170px;
max-width: none !important;
}

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

可是，此時問題並無結束。

如今給container一個固定寬度,白色背景的導航條寬度能夠鋪滿瀏覽器，可是，隨着屏幕變小，導航條白色背景就不能鋪滿瀏覽器變小後的寬度！還有就是個人輪播圖也是要求鋪滿瀏覽器寬度，如今也變得居中顯示了，內心想，早知道就不用bootstrap了，難道我如今還有重寫頁面？上網查了一下，沒有找到解決方法，後來，靈機一動，我能夠給body一個寬度啊，或者給導航條和輪播圖分別也設置相同的寬度，這個時候的問題，就是，設置多少寬度合適啊？發現，不能這樣作！

最後，用火狐調試代碼的時候，無心之間發現了這個好東西，@media ，可是，我本身設置了，在瀏覽器上沒反應，無語了，最後，花費了一點時間發現這個樣式沒寫對。
因此，解決導航條和輪播圖響應式問題的，第四點就是：

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}
他的意思就是，當屏幕小於1400px的時候，把body寬度設置爲1400px.不知道的讀者能夠上網學習一下，這但是一個好東西！

最後，說一下，top指的是position絕對定位時的top。關於對span設置寬度和高度是沒有做用的，他不是塊級元素，div是塊級元素，span是行內元素。若是想用span實現下圖中的按鈕，只須要根據須要設置padding便可。(padding:20px 20px等)
---------------------
做者：JEE-逆水百川
來源：CSDN
原文：https://blog.csdn.net/u012759397/article/details/63262409
版權聲明：本文爲博主原創文章，轉載請附上博文連接！