bootstrap row 下面的 col-md 高度相等高度一致高度一样有大用

网友奉送的代码但是不理想好像不能适用个别情况
//dom元素加载完时间
$(document).ready(function(){
asynconresize();
})
//页面改变大小事件
window.onresize = function(){
asynconresize();
}
//改变元素大小
var asyncοnresize=function(){
var width=$(window).width();//获取浏览器宽度；
var height=$(window).height();//获取浏览器高度；

$("div").height(height-0);
});

google   "bootstrap row col height same"
1) 加上 class row-eq-height
如下
<div class="row row-eq-height ">
同时在css中增加
       .row-eq-height{
        display: flex;
       }
但是 ie不起作用至少 ie9不起作用
来自 http://acmetech.github.io/todc-bootstrap-3/examples/equal-height-columns/
2) 有大用
html 代码
<div class="container">

<div class="row col-wrap">
           <div class="col-sm-4 col">
                 <div class="well">
                 <p>left column </p>
                 <p>left column </p>
                 <p>left column </p>
          </div>
</div>

<div class="col-sm-4 col">
            <div class="well">
               <p>middle column</p>
            </div>
</div>

<div class="col-sm-4 col">
             <div class="well">
                  <p>right column </p>
                  <p>right column </p>
                  <p>right column </p>
                  <p>right column </p>
                 <p>right column </p>
            </div>
</div> 

</div>

<div class="row base col-wrap">

            <div class="col-sm-4 col-base"><div class="well"></div></div>
            <div class="col-sm-4 col-base"><div class="well"></div></div>
            <div class="col-sm-4 col-base"><div class="well"></div></div>
</div>


</div>
css代码
@media (min-width: 768px) {

/* top row */
.col .well{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

/* bottom row */
.col-base{
margin-top: -15px; /* cut off top portion of bottom wells */
}
}

@media (max-width: 767px) {
.row.base{
display:none;
}
}

.col-wrap{
overflow: hidden;
}
上面的html和 css 可实现 col等高
来自 http://jsfiddle.net/panchroma/D4xdE/

3) 有大用
html代码

<div class="row"><div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item1"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                </div></a></div>    <div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item2"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p></div>  </a></div>    <div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item3"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p></div></a> </div>  <div class="col-md-3 index_div_item"><a href="#"><div class="well" id="item4"><h1 class="h1_item"><span class="titre_item">Title</span></h1><h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2><p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                </div>  </a>  </div>
</div>
js 代码
$( document ).ready(function() {var heights = $(".well").map(function() {return $(this).height();}).get(),maxHeight = Math.max.apply(null, heights);$(".well").height(maxHeight);
});
来自 http://stackoverflow.com/questions/23287206/same-height-column-bootstrap-3-row-responsive
4) 有大用 
html 代码
<div class="row"><div class="col-xs-12 col-sm-4 panel" style="background-color: red">some content</div><div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">kittenz<img src="http://placekitten.com/100/100"></div><div class="col-xs-6 col-sm-4 panel" style="background-color: blue">some more content</div>
</div>

一种 css代码

.row {display: table;
}[class*="col-"] {float: none;display: table-cell;vertical-align: top;
}
另一种 css 代码
.row{overflow: hidden;
}[class*="col-"]{margin-bottom: -99999px;padding-bottom: 99999px;
}

来自 http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height

还有一种 http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

bootstrap row 下面的 col-md 高度相等高度一致高度一样有大用相关推荐

mysql5.7 mysql库下面的user表没有password字段无法修改密码
如题所述,mysql5.7 mysql库下面的user表没有password字段无法修改密码, 5.7版本已经不再使用password来作为密码的字段了而改成了authentication_st ...
Bootstrap级联下拉菜单，你肯定用得到
今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费 ...
python循环体执行的次数与其他不同的是_下面的Python循环体的执行次数与其他不同的是()...
下面的Python循环体的执行次数与其他不同的是() 答:i=0 while(i<=10): print(i) i=i+1 懒扎衣动作主要包括掤.肩靠.肘击:穿掌.护身掌.铲脚技法.(?) 答: ...
WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单分割的按钮下拉菜单按钮下拉菜单的大小按钮上拉菜单 Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
python 合并word文档，实现同一个文件夹下面的word合并成一个word
python 合并word文档,实现同一个文件夹下面的word合并成一个word -- coding:utf-8 -- import win32com.client as win32 import o ...
linux下面的 mp3播放器xmms
linux下面的mp3播放器xmms 首先去下载,可以下载可执行文件或者是源代码,我提倡下载二进制的可执行程序,这个是一个安装包. 网址: 下载之后就是安装了,用强行安装,否则可能会出现一下比如说g ...
一个球从100米高度自由落下，每次落地后反弹回原高度的一半； * 再落下，求在第几次之后反弹高度小于0.1米， * 并计算在这一次落地时共经过多少米？...
package com.db2;/*** 一个球从100米高度自由落下,每次落地后反弹回原高度的一半: * 再落下,求在第几次之后反弹高度小于0.1米,* 并计算在这一次落地时共经过多少米?* * @ ...
sonarqube中，分析maven聚合工程时，不必分析parent工程，只需分析下面的module子工程即可
sonarqube中,分析maven聚合工程时,不必分析parent工程,只需分析下面的module子工程即可 cd ../../xxx-sms # mvn clean org.jacoco:jaco ...
Java黑皮书课后题第8章：*8.30（代数：解答线性方程）编写一个方法，解答下面的2*2线性方程组系统
*8.30(代数:解答线性方程)编写一个方法,解答下面的2*2线性方程组系统题目题目描述代码题目题目描述 8.30(代数:解答线性方程)编写一个方法,解答下面的22线性方程组系统: a00 ...

bootstrap row 下面的 col-md 高度相等高度一致高度一样有大用

bootstrap row 下面的 col-md 高度相等高度一致高度一样有大用相关推荐

最新文章

热门文章

bootstrap row 下面的 col-md 高度相等 高度 一致 高度一样 有大用

bootstrap row 下面的 col-md 高度相等 高度 一致 高度一样 有大用相关推荐

最新文章

热门文章

bootstrap row 下面的 col-md 高度相等高度一致高度一样有大用

bootstrap row 下面的 col-md 高度相等高度一致高度一样有大用相关推荐