Bootstrap 3.0 colonnes

Question

Avec le code ci-dessous est aussi proche que je peux obtenir, je ne peux tout simplement pas obtenir la barre de droite pour être aligné avec le bord supérieur de la boîte supérieure gauche. Étant nouveau à Bootstrap je ne peux tout simplement pas le faire fonctionner.

<div class="row"> 
    <div class="lh-top col-md-8 col-sm-9">left hand top area</div>   
    <div class="lh-dip-lower col-md-8 col-sm-9">left hand lower</div>   
    <div class="rh-dip col-sm-4 col-sm-3">Right hand side bar</div> 
</div> 

Answer 1

Comme vous l'avez dit, vous avez défini trois colonnes dans une seule ligne. Étant donné que votre nombre de colonnes de grille dépasse 12, elles seront renvoyées à la ligne suivante. Par exemple, aux tailles "md", la partie supérieure de la main gauche sera affichée sur la première ligne; puis puisque la colonne suivante (main gauche plus basse) l'amènerait à dépasser 12 colonnes de la grille, elle et la colonne suivante (barre de droite) s'enrouleront à la rangée suivante.

Je pense que vous voulez faire quelque chose comme:

<div class="row"> 
<div id="lh-column" col-md-8 col-sm-9></div> 
<div id="rh-column" col-md-4 col-sm-3></div> 
</div> 

Vous pouvez ensuite créer des colonnes dans les colonnes de droite à gauche et en intégrant d'autres colonnes Bootstrap comme ceci:

<div class="row"> 
<div id="lh-column" col-md-8 col-sm-9> 
     <div class="lh-top col-md-8 col-sm-9">left hand top area</div>   
     <div class="lh-dip-lower col-md-8 col-sm-9">left hand lower</div> 
</div> 
<div id="rh-column" col-md-4 col-sm-3> 
</div> 
</div> 

Answer 2

Vous pouvez simplement diviser la ligne entre le contenu div gauche et droit. Dans le div parent gauche, vous pouvez ajouter votre zone de contenu supérieure et gauche, qui sera automatiquement 100% de son parent. Cela garantit que votre barre de droite est alignée avec le div contenu de gauche.

HTML

<div class="row"> 
    <div id="lh-column" class="col-md-8 col-sm-9"> 
    <div class="lh-top">left hand top area</div>   
    <div class="lh-dip-lower">left hand lower</div> 
    </div> 
    <div id="rh-column" class="col-md-4 col-sm-3"></div> 
</div><!-- End .row -->