首頁  >  文章  >  web前端  >  bootstrap 如何取消自適應

bootstrap 如何取消自適應

藏色散人
藏色散人原創
2020-11-18 10:54:263748瀏覽

bootstrap取消自適應的方法:1、去掉頭部「

本教學操作環境:windows10系統、bootstrap3.0,本文適用於所有品牌的電腦。

推薦:《bootstrap影片教學

停用bootstrap響應式解決方法

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

bootstrap 如何取消自適應

用bootstarp做完頁面後,組長當時又改變主意了,說不用bootstrap,或者禁用bootstrap響應式,沒辦法,只有禁用響應式,花費時間最短了,去bootstrap官網上看,禁用響應式的話,第一:去掉頭部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等)

由於不是前端人員,所以對這些樣式不是很熟,不喜勿噴。

">

以上是bootstrap 如何取消自適應的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn