Comment réaliser une disposition en maçonnerie avec les colonnes de cartes de Bootstrap 4 ?

Comment créer une disposition de maçonnerie à l'aide de Flexbox dans Bootstrap 4

Le système de grille flexbox de Bootstrap 4 permet des dispositions de colonnes flexibles et réactives. Pour créer une disposition de colonnes de maçonnerie dans laquelle les éléments ont des hauteurs variables dans une rangée, vous pouvez utiliser la fonction de colonnes de cartes de Bootstrap.

Utilisation des colonnes de cartes

Comme indiqué dans le guide Bootstrap documentation :

"Les cartes peuvent être organisées en colonnes de type maçonnerie avec uniquement du CSS en les enveloppant dans Les colonnes .card. Les cartes sont construites avec des propriétés de colonne CSS au lieu de flexbox pour un alignement plus facile. Les cartes sont classées de haut en bas et de gauche à droite. "

Pour créer une disposition en maçonnerie, enveloppez simplement vos éléments .card. dans un conteneur .card-columns.

Exemple de code

Voici un exemple de Disposition de maçonnerie à l'aide de la fonctionnalité de colonnes de cartes de Bootstrap 4 :

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <blockquote class="blockquote mb-0 card-body">...</blockquote
    </div>
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">...</blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <img class="card-img" src="..." alt="Image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">...</blockquote
    </div>
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

En incorporant cette fonctionnalité de colonnes de cartes, vous pouvez facilement créer des dispositions de maçonnerie sans avoir besoin d'arrangements CSS ou flexbox personnalisés.

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!