La grille Flexbox de Bootstrap 4 peut-elle créer des dispositions de maçonnerie ?

Utilisation de la grille Flexbox Bootstrap 4 pour les dispositions en maçonnerie

Bootstrap 4 utilise un système de grille Flexbox pour la disposition des colonnes. Cependant, certains utilisateurs pourraient se demander s'il est possible de créer une disposition en maçonnerie, où les colonnes ont des hauteurs variables, en utilisant cette grille flexbox.

La réponse est oui, c'est réalisable avec les classes Bootstrap 4 standard. La documentation comprend une section dédiée aux colonnes de cartes qui activent cette fonctionnalité.

Fonctionnalité des colonnes de cartes

Comme indiqué dans la documentation Bootstrap 4 :

" Les cartes peuvent être organisées en colonnes de type Masonry avec uniquement du CSS en les enveloppant dans .card-columns. 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. conteneur.

Considérations

Gardez gardez à l’esprit que l’utilisation de colonnes de cartes n’est peut-être pas idéale dans toutes les situations. Pour empêcher les cartes de traverser les colonnes, il est recommandé de définir leur propriété d'affichage sur inline-block. Cependant, la propriété column-break-inside: évite CSS n'est pas encore une solution totalement fiable.

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

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!