Bootstrap 3.0 - вертикально выровнять 3 панели в одной строке (Auto Height)

Попытка иметь один ряд из трех панелей, где высота расширяется в соответствии с содержимым, и все они выравниваются должным образом. На левой панели был бы граф, два справа имели бы таблицы, которые работают с графиком слева.

Пример этого рабочего шаблона: Нажмите здесь для примера

Ответ 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>

update я забыл часть автохвота для примера выше, который вы могли бы использовать из fooobar.com/info/260057/...:

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

Bootstrap 3.0 - вертикально выровнять 3 панели в одной строке (Auto Height)

Ответы

Ответ 1