bootstrap栅格系统中同行div高度不一致的解决方法
来源:互联网 发布:mac显示flash 编辑:程序博客网 时间:2024/06/03 21:53
使用bootstrap的栅格系统排版,经常会碰到同一行的div高度不一致的情况,例如这样:
需要4个div高度相同,网上搜索了些方法,自己进行了尝试,下面这个方法是我试成功了的,但多少都有不尽人意的地方,求更好的方法
- 使用flex布局,优点:显示准确,缺点:兼容性差
.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap;}.row > [class*='col-'] { display: flex; flex-direction: column;}
- 通过div底部的margin和padding实现,缺点:下边框无法完整显示,建议在无边框情况下使用
.row{ overflow: hidden;}[class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px;}
- 在row结束的地方清除浮动,添加
<div class="clearfix"></div>
,这个最简单,但限制最多,每列的div的背景色要相同,并且不能有边框
<div class="row"> <div class="col-xs-6 col-md-3" id="col1"> A </div> <div class="col-xs-6 col-md-3" id="col2"> B<p>B</p> </div> <div class="col-xs-6 col-md-3" id="col3"> C </div> <div class="col-xs-6 col-md-3" id="col4"> D </div> <div class="clearfix"></div></div>
当然还有个方法就是使用js来控制各div高度相同,这里就不提了
0 0
- bootstrap栅格系统中同行div高度不一致的解决方法
- Bootstrap的栅格系统
- bootstrap的栅格系统
- Bootstrap的栅格化系统
- bootstrap的栅格系统(网格系统)
- Bootstrap中的栅格栅格系统
- 解决div与span等inline元素同行后高度不一致问题
- bootstrap的栅格系统的原理
- 学习笔记4-bootstrap的栅格系统
- Bootstrap 栅格系统的精妙之处
- 学习笔记4-bootstrap的栅格系统
- Bootstrap 栅格系统的精妙之处
- bootstrap栅格系统的列宽设定
- Bootstrap栅格系统的精妙之处
- bootstrap栅格系统变形的解决方案
- Bootstrap V3 栅格系统的小理解
- 使用BootStrap中的栅格系统后,页面调整变形的解决方法
- Bootstrap栅格系统研究
- 平板电脑出货不忍直视,瑞芯微、全志冰火两重天
- android开发中如何调用FFMPEG
- 如何设置高程数据投影及导出数据
- 11.2
- Linux-虚拟机使用:真机与虚拟机ping通
- bootstrap栅格系统中同行div高度不一致的解决方法
- Android Studio 统计代码行数插件 — Statistic
- Android:活动笔记
- ExtJs 通过 toggleClass 实现样式切换 ——以及更多的CSS操作
- String对象属性和方法参考
- spark调优(基础)
- 如何通过IP地址进行精准定位
- Android中Glide加载库的图片缓存配置究极指南
- PYTHON的程序在LINUX后台运行