Comment réaliser une disposition de maçonnerie à l'aide de la grille Flexbox de Bootstrap 4 ?

Comment créer une disposition de maçonnerie dans Bootstrap 4 avec Flexbox Grid

Dans Bootstrap 4, vous pouvez réaliser une disposition de colonnes de maçonnerie en utilisant la flexbox grille en tirant parti des Colonnes de cartes fonctionnalité.

Solution :

Enveloppez les éléments de votre carte dans un conteneur .card-columns, comme indiqué ci-dessous :

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

Explication :

• La classe .card-columns utilise des colonnes CSS pour organiser vos cartes de haut en bas et de gauche à droite.
• Les cartes sont affichées en bloc pour éviter qu'elles ne traversent les colonnes.
• Parce que column-break-inside : éviter n'est pas encore un solution à toute épreuve, vous risquez toujours de rencontrer des colonnes incohérentes hauteurs.

Exemple :

Considérez le HTML suivant :

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-1.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-2.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-3.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-with-long-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-4.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-with-even-more-text">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

Cela se traduira par un aménagement en maçonnerie, avec les cartes s'organisant en fonction de la hauteur de leur contenu, créant une grille visuellement attrayante et dynamique.

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!