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