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

Implémentation d'une disposition en maçonnerie à l'aide de la grille Flexbox Bootstrap 4

Créer une disposition en maçonnerie avec des colonnes de même hauteur peut s'avérer difficile avec le système de grille flexbox de Bootstrap 4. Cependant, vous pouvez y parvenir efficacement avec certaines classes Bootstrap intégrées.

Fonctionnalité de colonnes de cartes

Bootstrap 4 offre la fonctionnalité de colonnes de cartes, qui utilise les propriétés de colonne CSS pour aligner les cartes comme une grille de maçonnerie. . Cette méthode simplifie le processus d'alignement et empêche les cartes de traverser les colonnes.

<div class="container">
  <div class="card-columns">
    ...Your cards HTML code...
  </div>
</div>

Définition des cartes sur le bloc en ligne

Pour empêcher les cartes de traverser les colonnes, il est recommandé de les configurer pour qu'elles s'affichent : bloc en ligne dans le conteneur de colonnes de cartes. En effet, le style par défaut column-break-inside : évitez n'est pas entièrement fiable.

.card {
  display: inline-block;
}

Exemple de code

Voici un exemple d'extrait de code illustrant la disposition de la maçonnerie avec les cartes Bootstrap 4 :

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="card-image-1.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">

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!