bootstrap row 浮动 下面的 col-md 子元素 高度相等 高度 一致 高度一样 等高 对齐 有大用

网友奉送的代码 但是不理想 好像不能适用个别情况
//dom元素加载完时间
$(document).ready(function(){
 asynconresize();    
         })
//页面改变大小事件
window.onresize = function(){
 asynconresize();
 }
 //改变元素大小
 var asynconresize=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">
<!-- top row of wells or rounded corner divs -->

<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><!-- end span 4-->
    
<div class="col-sm-4 col">
            <div class="well">
               <p>middle column</p>
            </div>
</div><!--end span4-->
    
<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><!-- end span 4-->
       
</div><!-- end row -->
    

<div class="row base col-wrap">
<!-- add a second row of wells or rounded corner divs immeadiately underneath-->
            <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><!-- close row -->
    
    
</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