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 Cookie 直接浏览网站分网址
Dec 08 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
关于使用js算总价的问题
Jun 23 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
深入理解Node module模块
Mar 26 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue接口请求加密实例
Aug 11 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
Python3读取文件常用方法实例分析
2015/05/22 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Django 外键的使用方法详解
2019/07/19 Python
python通过链接抓取网站详解
2019/11/20 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
社团成立邀请函
2014/01/08 职场文书
农村党支部先进事迹
2014/01/14 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
公证委托书格式
2014/09/13 职场文书
个人总结与自我评价
2014/09/18 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2014年法院工作总结
2014/11/24 职场文书
七年级作文之秋游
2019/10/21 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python