Загрузочные вложенные панели в сетке равных высот

Question

У меня есть два ряда вложенных панелей внутри первичной панели. Первый ряд имеет 3 панели с неравными высотами. Как сделать 3 панели одинаковой высоты самой высокой панели (панель № 3 в ссылке jsfiddle)?

Вот 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