Hauteur égale des colonnes dans Bootstrap 4

Question

J'ai un petit DIV non-conventionnel dans cette conception comme montré ci-dessous. Je pourrais utiliser une hauteur et le faire mais je veux qu'il change dynamiquement: Par exemple, si le DIV a plus de contenu et que la hauteur change dans l'un des blocs à droite, le DIV auto de gauche ajuste sa hauteur aussi . Je me demande si flex pourrait aider. Voici comment cela devrait changer:

J'ai ce code HTML jusqu'à présent:

<div class="container"> 
    <div class="row row-eq-height"> 
     <div class="col-sm-8 col-8"> 
     <div class="black"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     </div> 
     <div class="col-sm-4 col-4"> 
     <div class="red"> 
      <p>numbers</p> 
     </div> 
     <div class="purple"> 
      <p>numbers</p> 
     </div> 
     <div class="green"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p>numbers</p> 
     </div> 
     </div> 
    </div> 
</div> 

et CSS:

p { color: #fff; } 
.black { background-color: black; } 
.green { background-color: green; } 
.red { background-color: red; } 
.blue { background-color: blue; } 
.purple { background-color: purple; } 

JSFiddle Demo

Answer 1

Vous pouvez utiliser flexbox pour cette .

Mise à jour

Et une autre façon:

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

.row-eq-height > [class^=col] { 
    display: flex; 
    flex-direction: column; 
} 

.row-eq-height > [class^=col]:last-of-type div { 
    margin: 10px; 
} 

.row-eq-height > [class^=col]:last-of-type div:first-of-type { 
    margin-top: 0; 
} 

.row-eq-height > [class^=col]:last-of-type div:last-of-type { 
    margin-bottom: 0; 
} 

.row-eq-height > [class^=col]:first-of-type .black { 
    flex-grow: 1; 
} 

Mise à jour

Une meilleure façon avec des classes plus spécifiques:

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

.row-eq-height > [class^=col]:first-of-type { 
    display: flex; 
} 

.row-eq-height > [class^=col]:first-of-type .black { 
    flex-grow: 1; 
} 

.blue p { 
    margin: 0; 
} 

Façon originale:

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

[class^=col] { 
    display: flex; 
    flex-direction: column; 
} 

[class^=col] div { 
    flex-grow: 1 
} 

Answer 2

Vous utilisez Bootstrap 4, non? Bootstrap 4 implémente FlexBox par défaut et vous pouvez résoudre ce très facile en utilisant uniquement les classes Bootstrap 4 dispose:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 col-8 black"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap"> 
     <div class="red"> 
      <p>numbers and more and so on and on and on</p> 
     </div> 
     <div class="purple"> 
      <p>numbers</p> 
     </div> 
     <div class="green"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p class="mb-0">numbers</p> 
     </div> 
     </div> 
    </div> 
</div> 

JS lien Fiddle: https://jsfiddle.net/ydjds2ko/

Détails:

• Vous n'avez pas besoin de la classe row-eq-height (ce n'est pas dans Bootstrap4 de toute façon) parce que la hauteur égale est par défaut.

• La première div avec la classe col-sm-8 a la bonne hauteur, elle n'est tout simplement pas visible avec le fond noir, car la div interne a sa propre hauteur. Je viens de supprimer le div interne et ajouté la classe black à la col. Si vous avez besoin de div interne, donnez-lui la classe (Bootstrap4) h-100 qui ajuste la hauteur de l'élément parent.

• La div avec la classe col-sm-4 obtient les classes d-flex align-content-around flex-wrap. Ils alignent les divs de contenu.Bootstrap Doku: https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

  • Régler la largeur des divs dans ce conteneur au Largeur du parent avec w-100

• Parce que le <p> ajoute une marge au fond, votre div bleue les extrémités ne se referment pas avec le div noir. J'ai ajouté la classe "mb-0", qui définit le bas de la marge à "0" afin que vous puissiez voir que cela fonctionne.

Cela devrait fonctionner que la division droite ou gauche soit celle qui a la plus grande propriété de hauteur.

Modifier: classes ajoutées pour l'alignement du contenu.

Answer 3

Voici une approche très simple Bootstrap pour cela. Vous n'avez pas besoin de CSS supplémentaire.

https://www.codeply.com/go/J3BHCFT7lF

<div class="container"> 
    <div class="row"> 
     <div class="col-8"> 
     <div class="black h-100"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     </div> 
     <div class="col-4 d-flex flex-column"> 
     <div class="red mb-2"> 
      <p>numbers</p> 
     </div> 
     <div class="purple mb-2"> 
      <p>numbers with more lines of content that wrap to the next line</p> 
     </div> 
     <div class="green mb-2"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p>numbers</p> 
     </div> 
     </div> 
    </div> 
</div> 

Il utilise le Bootstrap 4 utility classes pour faire la hauteur de remplissage de la colonne de droite.