前幾天接到一個任務，用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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！