欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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替換當(dāng)前頁面的方法

    這篇文章主要介紹了JavaScript替換當(dāng)前頁面的方法,涉及javascript中replace方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-04-04
  • uni-app返回上一個頁面并進(jìn)行頁面刷新的方法

    uni-app返回上一個頁面并進(jìn)行頁面刷新的方法

    這篇文章主要給大家介紹了關(guān)于uni-app返回上一個頁面并進(jìn)行頁面刷新的相關(guān)資料,返回上一頁面在uniapp有多種方法,文中給出了詳細(xì)的圖文示例,需要的朋友可以參考下
    2023-07-07
  • javascript getElementById 使用方法及用法

    javascript getElementById 使用方法及用法

    顧明思義,get-Element-By-Id,就是通過ID來設(shè)置/返回HTML標(biāo)簽的屬性及調(diào)用其事件與方法。用這個方法基本上可以控制頁面所有標(biāo)簽,條件很簡單就是給每個標(biāo)簽分配一個ID號
    2008-11-11
  • JavaScript CSS 通用循環(huán)滾動條

    JavaScript CSS 通用循環(huán)滾動條

    核心是 position:relative;,才能讓其內(nèi)部的 ul 以絕對定位,通過改變 top 值實(shí)現(xiàn)向上移位置。
    2009-10-10
  • 如何計(jì)算Web動畫幀率FPS

    如何計(jì)算Web動畫幀率FPS

    我們知道,動畫其實(shí)是由一幀一幀的圖像構(gòu)成的。有Web動畫那么就會存在該動畫在播放運(yùn)行時的幀率。而幀率在不同設(shè)備不同情況下又是不一樣的。有的時候,一些復(fù)雜或者重要動畫,需要實(shí)時監(jiān)控它們的幀率,從而更好的優(yōu)化它們,本文就是介紹Web動畫幀率(FPS)計(jì)算方法。
    2021-05-05
  • Web開發(fā)必知Javascript技巧大全

    Web開發(fā)必知Javascript技巧大全

     JavaScript是一個絕冠全球的編程語言,可用于Web開發(fā)、移動應(yīng)用開發(fā)(PhoneGap、Appcelerator)、服務(wù)器端開發(fā)(Node.js和Wakanda)等等,通過本文給大家介紹Web開發(fā)必知Javascript技巧大全,需要的朋友參考下吧
    2016-02-02
  • js獲取元素在瀏覽器中的絕對位置

    js獲取元素在瀏覽器中的絕對位置

    其原理就是利用HTMLElement.offsetParent屬性,需要的朋友可以參考下。
    2010-07-07
  • JavaScript反彈動畫效果的實(shí)現(xiàn)代碼

    JavaScript反彈動畫效果的實(shí)現(xiàn)代碼

    本文通過實(shí)例代碼給大家介紹了js反彈動畫效果的實(shí)現(xiàn)代碼,需要的朋友參考下吧
    2017-07-07
  • JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析

    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é)

    這篇文章主要介紹了JavaScript中textRange對象使用方法小結(jié),需要的朋友可以參考下
    2015-03-03

最新評論