Comment désactiver les colonnes de même hauteur dans bootstrap 4.0

Question

Après des heures à tirer mes cheveux pour savoir pourquoi mes colonnes ont toutes été réglées à la même hauteur, j'ai appris que le bootstrap est maintenant automatiquement expédié de cette façon en v4. Comment va-t-on se passer de ça et aller mal aux colonnes normales de v3?

Merci.

<div class="container"> 
      <div class="row"> 
      <div class="col-sm-8"> 
       <p> Hi, I'm a small container. </p> 
      </div> 
      <div class="col-sm-4"> 
       <h1> Hi, I'm a much bigger container. </h1> 
      </div> 
      </div> 
    </div> 

Dans cet exemple, ma plus petite hauteur de div obtient étirées il est donc la même hauteur que le plus gros pour le texte plus. C'est ce que je veux éviter.

Answer 1

Sur Bootstrap 4 il y a des utilitaires ēno, de sorte que vous pouvez ajouter .ALIGN-articles-début à la .row:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row align-items-start"> 
 
    <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down"> 
 
     Some content on the left that's going to be smaller than right 
 
    </div> 
 
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
 
    A <br/> 
 
    B <br/> 
 
    C <br/> 
 
    D <br/> 
 
    E <br/> 
 
    F <br/> 
 
    </div> 
 
</div>