Comment puis-je créer une disposition de colonnes de maçonnerie avec la grille Flexbox de Bootstrap 4 ?

Disposition de colonnes de maçonnerie avec grille Flexbox dans Bootstrap 4

Bien que le système de grille flexbox dans Bootstrap 4 offre une polyvalence dans la création de mises en page réactives, c'est vrai que les colonnes affichent initialement avec une hauteur égale. Cependant, il est possible de réaliser une disposition en colonnes de maçonnerie en utilisant la fonctionnalité "Colonnes de cartes".

Colonnes de cartes

Comme expliqué dans la documentation Bootstrap 4, "Les cartes peuvent être organisés en colonnes de type maçonnerie avec juste du CSS en les enveloppant dans des colonnes .card. " Cette fonctionnalité utilise les propriétés de colonne CSS, garantissant un alignement plus facile par rapport à flexbox.

Pour créer une disposition de colonne en maçonnerie, enveloppez simplement vos éléments .card dans un conteneur .card-columns. Les cartes s'organiseront ensuite de manière dynamique, leur hauteur étant déterminée par leur contenu.

Cette approche conserve la simplicité et la réactivité de la grille flexbox de Bootstrap, tout en offrant l'effet de maçonnerie souhaité.

Exemple

Vous trouverez ci-dessous un exemple de code démontrant l'utilisation de colonnes de cartes pour créer une maçonnerie disposition :

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card content</p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Another card title</h5>
        <p class="card-text">More card content</p>
      </div>
    </div>
    <!-- Additional cards can be added as needed -->
  </div>
</div>

En utilisant des colonnes de cartes, vous pouvez facilement obtenir la disposition des colonnes de maçonnerie souhaitée en utilisant le système de grille flexbox de Bootstrap 4.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!