Bootstrap页面缩小变形的快速解决办法


Posted in Javascript onFebruary 03, 2017

bootstrap布局是应用得很广泛的一种网页布局方法,例如:我们用一种中间内容很流行的布局分布: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>

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

Bootstrap页面缩小变形的快速解决办法

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

Bootstrap页面缩小变形的快速解决办法

不仅中间的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>

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

Bootstrap页面缩小变形的快速解决办法

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

Bootstrap页面缩小变形的快速解决办法

以上所述是小编给大家介绍的Bootstrap页面缩小变形的快速解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
Java File类的常用方法总结
Mar 18 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
拖动时防止选中
Feb 03 #Javascript
jQuery表格的维护和删除操作
Feb 03 #Javascript
折叠菜单及选择器的运用
Feb 03 #Javascript
jQuery读取XML文件的方法示例
Feb 03 #Javascript
JavaScript函数基础详解
Feb 03 #Javascript
JavaScript提高加载和执行效率的方法
Feb 03 #Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 #Javascript
You might like
基于PHP+MySQL的聊天室设计
2006/10/09 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
详解Django配置JWT认证方式
2020/05/09 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
致铅球运动员广播稿精选
2014/01/12 职场文书
中学教师管理制度
2014/01/14 职场文书
成考报名单位证明范本
2014/01/16 职场文书
户外活动策划方案
2014/03/12 职场文书
南京青奥会口号
2014/06/12 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
初中毕业生感言
2015/07/31 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
Golang二维数组的使用方式
2021/05/28 Golang