web-dev-qa-db-ja.com

Bootstrap 3.0-同じ行の3つのパネルを垂直方向に揃える（自動高さ）

コンテンツに応じて高さが拡大し、すべてが適切に整列する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>
cssresponsive-designvertical-alignmenttwitter-bootstrap-3alignment
12
Robert Wojtow

グリッド列をネストします。 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>

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)
});
14
Bass Jobsen