web-dev-qa-db-fra.com

Hauteur égale des colonnes en Bootstrap 4

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

J'ai ce 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; }

Démo JSFiddle

csstwitter-bootstrapcss3bootstrap-4twitter-bootstrap-4
8
Elaine Byene

Vous pouvez utiliser flexbox pour cela.

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

Manière originale:

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

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

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

Vous utilisez Bootstrap 4, non? Bootstrap 4 implémente flexbox par défaut et vous pouvez résoudre ce problème très facilement tout en utilisant uniquement des classes Bootstrap 4 fournit:

<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 Fiddle link: 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) car une hauteur égale est par défaut.

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

  • le 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églez la largeur des div à l'intérieur de ce conteneur à la largeur du parent avec w-100

  • Parce que le <p> ajoute une marge en bas, votre div bleu aux extrémités ne se rapproche pas du div noir. J'ai ajouté la classe "mb-0", qui définit le bas de la marge à "0" pour que vous puissiez voir que cela fonctionne.

Cela devrait fonctionner que le div droit ou gauche soit celui avec la plus grande propriété de hauteur.

Edit: ajout de classes pour l'alignement du contenu.

10
programmiri

Voici une approche très simple Bootstrap uniquement 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>

Cela utilise classes utilitaires Bootstrap 4 pour définir la hauteur de remplissage de la colonne appropriée.

En relation:
hauteur bootstrap 4 rangées

4
Zim