ブートストラップ3.0 - 同じ行に3つのパネルを垂直に整列させる（自動高さ）

Question

内容に応じて高さが拡大され、すべてが正しく整列する3つのパネルの1列を使用しようとしています。左のパネルにはグラフがあり、右の2つは左のグラフで動作するテーブルを持っています。この作業の

例は、このテンプレートです：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

巣あなたのグリッド列、次を参照してください。http://getbootstrap.com/css/#grid-nesting

例：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> 

アップ日付あなたがhttps://stackoverflow.com/a/12330800/1596547から使用できる上に、私は例えばautoheightの一部を忘れてしまった：

$(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) 
});