在等高的网格中引导嵌套面板

Question

我在主面板内部有两行嵌套面板。第一排有3块高度不等的面板。如何让3个面板与最高面板（jsfiddle链接中的面板＃3）的高度相同？

这里的的jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/

我想面板＃1和＃面板2的面板＃3，或取其最高的面板将是相同的高度。

感谢您的帮助。

这里是我的标记：

<div class="container"> 
<div class="panel panel-primary"> 
    <div class="panel-heading">outer</div> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <div class="panel panel-info"> 
       <div class="panel-heading">1</div> 
       <div class="panel-body"> 
        <div class="list-group"> 
         <div class="list-group-item">111</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="panel panel-info"> 
       <div class="panel-heading">2</div> 
       <div class="panel-body"> 
        <div class="list-group"> 
         <div class="list-group-item">222</div> 
         <div class="list-group-item">222</div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-4"> 
      <div class="panel panel-info"> 
       <div class="panel-heading">3</div> 
       <div class="panel-body"> 
        <div class="list-group"> 
         <div class="list-group-item">333</div> 
         <div class="list-group-item">333</div> 
         <div class="list-group-item">333</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="panel panel-info"> 
       <div class="panel-heading"> 
        <span>lower</span> 
       </div> 
       <div class="panel-body"> 
         xyz 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

尝试使用map()来处理每个项目，并获得最高的面板的大小。将这个高度应用于每个面板。

JS

var heightTallest = Math.max.apply(null, $(".panel-info").map(function() 
{ 
return $(this).outerHeight(); 
}).get()); 
$('.panel-info').css({ height: heightTallest + 'px' }); 

Answer 2

更新的jsfiddle： http://jsfiddle.net/MgcDU/8915/

使用jQuery适用高度的.row

$('.row').each(function(){ 
var RowHeight = $(this).innerHeight(); 
$(this).children().css({ height: RowHeight + 'px' }); 
}); 

儿童，并设置为你想要什么尺寸.panel的高度，例如。 100％

Answer 3

如果你对浏览器兼容性的限制没问题，你可以试试这个基于CSS flexbox的实验代码：https://github.com/twbs/bootstrap/pull/11851