Bootstrap 3.0 - Alignez verticalement 3 panneaux dans la même rangée (Hauteur automatique)

En essayant d'avoir une seule ligne de 3 panneaux dont la hauteur se développe en fonction du contenu et ils sont tous alignés correctement. Le panneau de gauche aurait un graphique, les deux sur la droite aurait tables de travail avec le graphique sur la gauche.

Exemple de ce travail est de ce modèle: Cliquez Ici Pour Un Exemple

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

source d'informationauteur Robert Wojtow

  1. 14

    Nest votre de colonnes de la grille, voir: http://getbootstrap.com/css/#grid-nesting

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

    mise à jour j'ai oublié le autoheight partie pour l'exemple ci-dessus, vous pouvez utiliser à partir de 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)
});