Bootstrap頁面縮小變形的快速解決辦法
更新時間：2017年02月03日 14:10:20 作者：dearxiangxiao
bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁布局方法，下面通過本文給大家介紹bootstrap頁面縮小變形的快速解決辦法，需要的朋友參考下吧
bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁布局方法，例如：我們用一種中間內(nèi)容很流行的布局分布：3-6-3式布局。代碼如下
<style type="text/css">
body{width:1350px;
}
header{
background-color:#d9534f;
height:120px;
}
.center{
background-color:#31b0d5;
border:1px solid #ff0000;
height:300px;
margin:0px;
}
footer{
background-color:#f0ad4e;
height:100px;
}
</style>
<header class="col-lg-12 "></header>
<div class="col-lg-12 ">
<div class="col-lg-3 "></div>
<div class="col-lg-6 "></div>
<div class="col-lg-3"></div>
</div>
<footer class="col-lg-12"></footer>
運(yùn)行之后，頁面正常，效果如下：
但是，當(dāng)我們把頁面窗口縮小后，發(fā)現(xiàn)頁面中間的3個div被擠開了，一個div獨(dú)占一行了，效果如下：
不僅中間的div被擠得位置錯亂，網(wǎng)頁的長度還自動加長了，這可不是我們需要的效果，這時，可把每個分區(qū)的class屬性同時設(shè)置為col-lg col-md col-sm col-xs,自適應(yīng)每一種大小的屏幕，改動后的代碼如下：
<header class="col-lg-12 col-md-12 col-xs-12 col-sm-12"></header> <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"> <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center"></div> <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center"></div> <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center"></div> <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center"></div> </div> <footer class="col-lg-12 col-md-12 col-xs-12 col-sm-12"></footer>
再運(yùn)行，縮小頁面之后，頁面再不亂排列了，但縮小頁面窗口時，發(fā)現(xiàn)頁面變得扁了，效果如下：
這是每個塊區(qū)元素沒有寬度所導(dǎo)致的，若此時再給body設(shè)置寬度，[width：1350px(屏幕寬度)]則可以避免這種情況，自動生成了滾動條，并讓頁面正常顯示，效果如下：
以上所述是小編給大家介紹的Bootstrap頁面縮小變形的快速解決辦法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript替換當(dāng)前頁面的方法,涉及javascript中replace方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于uni-app返回上一個頁面并進(jìn)行頁面刷新的相關(guān)資料,返回上一頁面在uniapp有多種方法,文中給出了詳細(xì)的圖文示例,需要的朋友可以參考下2023-07-07
javascript getElementById 使用方法及用法
顧明思義，get-Element-By-Id，就是通過ID來設(shè)置/返回HTML標(biāo)簽的屬性及調(diào)用其事件與方法。用這個方法基本上可以控制頁面所有標(biāo)簽，條件很簡單就是給每個標(biāo)簽分配一個ID號2008-11-11
核心是 position:relative;，才能讓其內(nèi)部的 ul 以絕對定位，通過改變 top 值實(shí)現(xiàn)向上移位置。2009-10-10
我們知道，動畫其實(shí)是由一幀一幀的圖像構(gòu)成的。有Web動畫那么就會存在該動畫在播放運(yùn)行時的幀率。而幀率在不同設(shè)備不同情況下又是不一樣的。有的時候，一些復(fù)雜或者重要動畫，需要實(shí)時監(jiān)控它們的幀率，從而更好的優(yōu)化它們，本文就是介紹Web動畫幀率（FPS）計(jì)算方法。2021-05-05
JavaScript是一個絕冠全球的編程語言，可用于Web開發(fā)、移動應(yīng)用開發(fā)（PhoneGap、Appcelerator）、服務(wù)器端開發(fā)（Node.js和Wakanda）等等，通過本文給大家介紹Web開發(fā)必知Javascript技巧大全，需要的朋友參考下吧2016-02-02
其原理就是利用HTMLElement.offsetParent屬性，需要的朋友可以參考下。2010-07-07
JavaScript反彈動畫效果的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了js反彈動畫效果的實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-07-07
JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
這篇文章主要介紹了JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見實(shí)現(xiàn)方法原理與操作技巧,需要的朋友可以參考下2018-07-07
JavaScript中textRange對象使用方法小結(jié)
這篇文章主要介紹了JavaScript中textRange對象使用方法小結(jié),需要的朋友可以參考下2015-03-03