css - tabla - Bootstrap 3.0: alinee verticalmente 3 paneles en la misma fila(altura automática)

tamaño celda bootstrap

Question

Tratando de tener una sola fila de 3 paneles donde la altura se expande de acuerdo con el contenido y todos se alinean correctamente. El panel izquierdo tendría un gráfico, los dos de la derecha tendrían tablas que funcionan con el gráfico de la izquierda.

Ejemplo de este trabajo es esta plantilla: haga clic aquí para ver un ejemplo

<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

Anida tus columnas de cuadrícula, mira: http://getbootstrap.com/css/#grid-nesting

Ejemplo: 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>

actualización olvidé la parte de autoherencia para el ejemplo anterior que podría usar desde 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)
});