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

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>

运行之后，页面正常，效果如下：

但是，当我们把页面窗口缩小后，发现页面中间的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(屏幕宽度)]则可以避免这种情况，自动生成了滚动条，并让页面正常显示，效果如下：

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

赞 (0)

相关推荐

  • BootStrap轻松实现微信页面开发代码分享

    1.  行长度: <div class="col-md-12"> </div> 2.modal <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <

  • Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js

    在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形.在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件--jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果--不知

  • Bootstrap登陆注册页面开发教程

    Bootstrap登陆注册页面开发教程

    Bootstrap登陆注册功能比较简单, 主要参考bootstrap 表单功能(http://v3.bootcss.com/css/#forms) 大家也可以参考这篇关于bootstrap 表单基本知识点的文章进行学习:<Bootstrap每天必学之表单> 遇到的问题 点击submit 提交, 抓包工具没有抓取到相应的表单数据, 问题原因在于, form 表单的数据都是通过 表单中 的name 属性进行提交的, 而我们之前直接从 bootstrap 上拷贝的代码中没有name 属性, 因而导致

  • BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

    BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst

  • Bootstrap编写一个同时适用于PC、平板、手机的登陆页面

    Bootstrap编写一个同时适用于PC、平板、手机的登陆页面

    Bootstrap如同前台框架,它已经布置好不少的CSS,前端开发的使用需要则直接调用即可.其网站的网址就是http://www.bootcss.com.使用Bootstrap能减少前端开发时候在CSS样子的布置时间 需要使用Bootstrap先在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3. 将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点

  • AngularJs bootstrap搭载前台框架——基础页面

    AngularJs bootstrap搭载前台框架——基础页面

    1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstrap的),代码如下: <script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></scrip

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

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

    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

  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样.于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法. $(".love .collapse").collapse('hide'); 调用之后发现,点击连接苗,data-parent失效了,也就是可

  • BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

    bootstrap 图标icon符号图标glyphicons不正常显示解决办法如下所示: 分享供各位参考: 1.在ff/http:的地址栏中输入"about:config",即进入配置界面. 2.进入后,搜索"security.fileuri.strict_origin_policy",这是该值应该是true. 3.双击该项,其值自动变为false,即可. 4.修改后,再刷新遇到问题的页面,即可看到正常显示的图标了. 探究问题原因: 1.由于ff/http:一个安全

  • Ajax提交Form表单页面仍会刷新问题的快速解决办法

    搞了半天原来点击提交按钮 少加了个type="button"  原来是  <form >  <button id="sub" />   </form>  结果怎么弄都会刷新页面,加上就好了  PS:form 表单中存在button时ajax提交后自动刷新问题 //在记一个坑(刚学前台,不是很懂,项目中自己给自己挖了个坑,哈哈...) <form class="form-horizontal"> &l

  • 关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

    最近项目用到了backbone 做前后端的分离方案,遇见了中文乱码问题,解决方案总结如下: 假设需要存一条课程记录到后台 model定义如下: var AddCourse= Backbone.Model.extend({ url:path+"/course/add", parse : function(response){ return response.data; } }); encodeURIComponent 函数 将中文的内容进行编码 $('#addCourseBtn' ).c

  • 请求转发jsp页面乱码问题的快速解决方法

    •在最近的项目中 使用了jsp+servlet来开发项目,但是由于后台的不太熟练 导致了困难重重.所幸 学习能力还可以 一边做一遍学吧. •今天的问题:请求转发后页面的乱码问题 •由于特殊原因--图片上传的form表单无法通过ajax提交 因此必须使用form表单直接提交.但是这样会导致一个问题:前后台交互的时候效果不好.为什么效果不好?这里说的不是功能的问题.作为web开发者,客户的体验我们要放在第一位.因此,我们必须将对客户的信息反馈放在一个比较重要的地位.说白了,就是上传个图片成没成功?我

  • Oracle+Mybatis的foreach insert批量插入报错的快速解决办法

    最近做一个批量导入的需求,将多条记录批量插入数据库中. 解决思路:在程序中封装一个List集合对象,然后把该集合中的实体插入到数据库中,因为项目使用了MyBatis,所以打算使用MyBatis的foreach功能进行批量插入.期间遇到了"SQL 命令未正确结束 "的错误,最终解决,记录下来供以后查阅和学习. 首先,在网上参考了有关Mybatis的foreach insert的资料,具体如下: foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach

  • 详解DB2 sqlstate 57016 SQLCODE=-668 原因码

    详解DB2 sqlstate 57016 SQLCODE=-668 原因码 "7"错误的快速解决办法

    以上所述是小编给大家介绍的详解DB2 sqlstate 57016 SQLCODE=-668 原因码 "7"错误的快速解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • Java enum关键字不识别的快速解决办法

    Java enum关键字不识别的快速解决办法

    从别人那儿拷贝过来的myeclipse java工程,打开一看标红了一大片,仔细一看,原来是不识别enum关键字,这就有点尴尬了. 我自己重新建了一个java工程,测试了下,假如我在新建工程的时候选择JavaSE-1.6: 是识别enum关键字的,但是假如我选择第二个或者默认的jdk1.8,那就不行了,后来发现java compiler compliance level中的最高上限也才1.7,所以,两种解决方法(原理是一样的),一是将compiler compliance level设置到1.5

  • iOS9与XCode7中不能使用http连接的快速解决办法

    iOS9与XCode7中不能使用http连接的快速解决办法

    在Xcode7.0及以上版本中编译iOS APP时,默认会使用iOS9的一项新特性,使得所有http连接被禁用,项目里使用的API没有https支持,就悲剧了.差了官方文档,有这么一段话 App Transport Security App Transport Security (ATS) enforces best practices in the secure connections between an app and its back end. ATS prevents accident

随机推荐