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
如下
 row-eq-height ">
同时在css中增加 
       .row-eq-height{
        display: flex;
       }
但是 ie不起作用 至少 ie9不起作用 

来自  http://acmetech.github.io/todc-bootstrap-3/examples/equal-height-columns/
2)   有大用 
html 代码




          

                

                

left column


                

left column


                

left column


         


    

           

              

middle column


           


    

            

                 

right column


                 

right column


                 

right column


                 

right column


                

right column


           


       

    



           

           

           


    
    

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代码

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 代码 
some content
kittenz
some more content
一种 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

你可能感兴趣的:(CSS,HTML)