使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不一样,会导致盒子的高度不一致,这样会使界面不太美观,并且可能会影响后面的盒子。可能的界面如下:

然而,我想要的是一排盒子的高度一致,如果把盒子高度固定住,比如:height:500px;会导致屏幕大小变化时,盒子高度没有随着宽的改变而改变,所以我找到了另一个方法:

把盒子的高度设为0,利用padding撑起高度:

height: 0;
padding:0 0 200% 0;

如上所示,如果把下padding设为200%,那么无论宽度如何变化,宽和高的比都是1:2,这样你就可以随自己需要设置宽和高的比例了,是不是觉得很方便呢。效果图如下:

终于得到我想要的结果了。

使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。的更多相关文章

  1. CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应

    一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够 ...

  2. Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  3. bootstrap的自适应 和细节点

    bootstrap的自适应尽量少用绝对宽度px来定义大小,这会导致缩小屏幕宽度时相冲突,多使用百分比来改变位置.. 遇到不能用margin和padding来改变位置时,首先应该想到绝对定位和相对定位( ...

  4. 详解Bootstrap网格系统

    bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row ...

  5. bootstrap学习笔记--bootstrap网格系统

    移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...

  6. Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  7. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

  8. easyui panel自适应浏览器宽度

    一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...

  9. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

随机推荐

  1. EF查询百万级数据的性能测试

    一.起因  个人还是比较喜欢EF的,毕竟不用写Sql,开发效率高,操作简单,不过总是听人说EF的性能不是很好,也看过别人做的测试,但是看了就以为真的是那样.但是实际上到底是怎么样,说实话我真的不知道. ...

  2. Java面试常考------------------------垃圾收集算法

    对于Java系学生而言,Java虚拟机中的垃圾收集算法是一个很重要的面试考点. 常用的垃圾收集算法主要可划分为以下三类: 1. 标记-清除算法 标记清除算法是一种比较简单的方法,直接标记内存中待回收的 ...

  3. 今天真开心,终于知道怎么打包apk了

    1.函数上下文的产生,并不是函数定义时决定的,而是函数调用时产生的:来个栗子 function creep(){return this;} console.log(creep()) var sneak ...

  4. 基于vue2.0的一个豆瓣电影App

    1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...

  5. WPF制作带明细的环形图标

    效果 明细用Popup实现的,录gif时,Popup显示不出来,不知道为什么,所以静态图凑合看吧 大体思路 图表使用Arc+Popup实现 图表分为两部分,一是环形部分,一是标注的明细部分. 环形部分 ...

  6. Servlet端 接收不到4096,8192长度的JSON参数

    Servlet端的日志显示,客户端传过来的JSON参数是空值. 但是在客户端的日志显示,已将JSON参数传送过去. 经调查发现,加减1位后的JSON参数均可以正常传送. 只有8192,4096长度的J ...

  7. 【Storm】Storm实战之频繁二项集挖掘

    一.前言 针对大叔据实时处理的入门,除了使用WordCount示例之外,还需要相对更深入点的示例来理解Storm,因此,本篇博文利用Storm实现了频繁项集挖掘的案例,以方便更好的入门Storm. 二 ...

  8. Java编程思想总结笔记The first chapter

    总觉得书中太啰嗦,看完总结后方便日后回忆,本想偷懒网上找别人的总结,无奈找不到好的,只好自食其力,尽量总结得最好. 第一章  对象导论 看到对象导论觉得这本书 目录: 1.1 抽象过程1.2 每个对象 ...

  9. windows调试工具列表

    摘自windbg帮助文档(windbg中输入.hh): Debugging Tools for Windows (安装WinDbg后这些工具都会安装在目录C:\Program Files (x86)\ ...

  10. solr6.3 + Hbase Indexer使用MR创建索引,错误Bad return type

    使用solr6.3 + Hbase Indexer ,通过Hbase-indexer从Hbase建立索引到solr中,进行全文搜索. 两种实现方式:① 开启hbase-indexer进行实时同步新数据 ...