Comment créer des cartes bootstrap de même hauteur dans les colonnes de cartes ?

Cartes Bootstrap de hauteur égale dans les colonnes de cartes

Lors de l'utilisation de la classe card-columns de Bootstrap, les cartes de hauteurs différentes peuvent créer une disposition inégale. Pour obtenir des cartes de hauteur égale, envisagez les solutions suivantes :

Utilisation d'align-items-stretch sur les colonnes

Dans la ligne parent contenant la classe card-columns, ajoutez la classe utilitaire d-flex align -items-stretch à chaque colonne. Cela alignera le contenu de la carte verticalement, créant ainsi des cartes de hauteur égale :

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!-- CARD HERE -->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!-- CARD HERE -->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!-- CARD HERE -->
        </div>
    </div>
</div>

Exemple pour Bootstrap 5 (BS5)

L'exemple HTML complet suivant illustre la solution align-items-stretch en BS5 :

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </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!