Bootstrap 3.0 - Wyrównaj w pionie 3 panele w tym samym rzędzie (Auto Height)

Question

Próbujesz utworzyć pojedynczy rząd 3 paneli, w których wysokość się powiększa zgodnie z zawartością i wszystkie wyrównują się prawidłowo. Lewy panel zawierałby wykres, a dwa po prawej miałyby tabele, które działają z wykresem po lewej stronie.

Przykład tej pracy jest to szablon: Click Here For Example

<div class="row"> 
    <div class="col-md-8"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Panel title</h3> 
      </div> 
      <div class="panel-body">Panel content 
      </div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Panel title</h3> 
      </div> 
      <div class="panel-body">Panel content 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">Panel title</h3> 
      </div> 
      <div class="panel-body">Panel content 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Nest kolumnach siatki, zobacz: http://getbootstrap.com/css/#grid-nesting

Przykład: http://bootply.com/79487

html

<div class="container"> 
    <div class="row"> 

     <div class="col-sm-6"> 
         <div class="panel panel-success"> 
          <div class="panel-heading"> 
           <h3 class="panel-title">Graph</h3> 
          </div> 
          <div class="panel-body"> 
           <img src="http://dummyimage.com/600x500/000/fff&amp;text=Graph" class="img-responsive"> 
          </div> 
          </div> 
      </div> 



     <div class="col-sm-6"> 
       <div class="row"> 
        <div class="col-sm-12"> 
          <div class="panel panel-primary"> 
          <div class="panel-heading"> 
           <h3 class="panel-title">Panel title</h3> 
          </div> 
          <div class="panel-body"> 
           Panel content 
          </div> 
          </div> 
         </div> 
        <div class="col-sm-12"> 
          <div class="panel panel-success"> 
          <div class="panel-heading"> 
           <h3 class="panel-title">Panel title</h3> 
          </div> 
          <div class="panel-body"> 
           Panel content 
          </div> 
          </div>  
        </div> 
       </div> 
     </div>   
    </div>  
</div> 

górę data zapomniałem część autoheight dla powyższego przykładu można użyć od https://stackoverflow.com/a/12330800/1596547:

$(window).load(function() { 

boxes = $('.col-sm-6'); 
maxHeight = Math.max.apply(
Math, boxes.map(function() { 
return $(this).height(); 
}).get()); 
boxes.height(maxHeight); 
$('.col-sm-12 .panel').height(maxHeight/2-22);//22 = 20 (bottom-margin) + 2 *1 (border) 
});