zoukankan      html  css  js  c++  java
  • Bootstrap解决页面缩小变形的办法

    bootstrap布局是应用得很广泛的一种网页布局方法,例如:我们用一种中间内容很流行的布局分布:3-6-3式布局。代码如下

    <style type="text/css">
    body{
    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>

    运行之后,页面正常,效果如下:

    但是,当我们把页面窗口缩小后,发现页面中间的3个div被挤开了,一个div独占一行了,效果如下:

    不仅中间的div被挤得位置错乱,网页的长度还自动加长了,这可不是我们需要的效果,这时,可把每个分区的class属性同时设置为col-lg col-md col-sm col-xs,自适应每一种大小的屏幕,改动后的代码如下:

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

    再运行,缩小页面之后,页面再不乱排列了,但缩小页面窗口时,发现页面变得扁了,效果如下:

    这是每个块区元素没有宽度所导致的,若此时再给body设置宽度,[width:1350px(屏幕宽度)]则可以避免这种情况,自动生成了滚动条,并让页面正常显示,效果如下:

  • 相关阅读:
    December 23rd 2016 Week 52nd Friday
    December 22nd 2016 Week 52nd Thursday
    December 21st 2016 Week 52nd Wednesday
    December 20th 2016 Week 52nd Tuesday
    December 19th 2016 Week 52nd Sunday
    December 18th 2016 Week 52nd Sunday
    uva294(唯一分解定理)
    uva11624Fire!(bfs)
    fzu2150Fire Game(双起点bfs)
    poj3276Face The Right Way
  • 原文地址:https://www.cnblogs.com/xiangxiao/p/4768695.html
Copyright © 2011-2022 走看看