부트 스트랩 동일한 높이의 그리드에 중첩 패널

Question

기본 패널 내부에 두 개의 중첩 패널 행이 있습니다. 첫 번째 행에는 3 개의 높이가 아닌 패널이 있습니다. 3 개의 패널을 가장 높은 패널 (jsfiddle 링크의 패널 # 3)과 동일한 높이로 만드는 방법은 무엇입니까? http://jsfiddle.net/niner911/MgcDU/8905/

내가 패널 # 1, 패널 2 패널 # 3, 가장 높은 패널이 될 것이다 중의 같은 높이를 싶습니다 -

다음은 jsfiddle입니다.

도움 주셔서 감사합니다.

여기 내 마크 업입니다 :

<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/

이 셀에만

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

의 아이들에게 높이를 적용하고 예를 들어, 어떤 크기 당신이 원하는하기 .panel 높이를 설정 JQuery와 사용. 100 %

Answer 3

브라우저 호환성 제한이있는 경우이 CSS flexbox 기반 실험 코드를 사용해보십시오. https://github.com/twbs/bootstrap/pull/11851