コンテンツに応じて高さが拡大し、すべてが適切に整列する3つのパネルを1列に配置しようとしています。左側のパネルにはグラフがあり、右側の2つには左側のグラフで動作するテーブルがあります。
この動作の例は、次のテンプレートです。 例はここをクリック
<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>
グリッド列をネストします。 http://getbootstrap.com/css/#grid-nesting を参照してください
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&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>
updatehttps://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)
});