Bootstrap 3.0 - Sắp thẳng hàng 3 ô trong cùng một hàng (Chiều cao tự động)

Question

Cố gắng có một hàng gồm 3 bảng nơi chiều cao mở rộng theo nội dung và tất cả đều sắp xếp chính xác. Bảng điều khiển bên trái sẽ có biểu đồ trong đó, hai bên phải sẽ có các bảng hoạt động với biểu đồ ở bên trái.

Ví dụ về làm việc này là mẫu này: 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 cột lưới của bạn, xem: http://getbootstrap.com/css/#grid-nesting

Ví dụ: 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> 

lên ngày tôi quên phần autoheight ví dụ ở trên, bạn có thể sử dụng từ 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) 
});