在等高的網格中引導嵌套面板

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