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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
Postman无法正常返回结果问题解决
Aug 28 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP 实现缩略图
2021/03/09 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
python切割图片的示例
2020/11/12 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
煤矿安全生产标语
2014/06/06 职场文书
2014年科研工作总结
2014/12/03 职场文书
老公婚前保证书
2015/02/28 职场文书
小学生表扬稿范文
2015/05/05 职场文书
统招统分证明
2015/06/23 职场文书