Comment créer des cartes Bootstrap 4 colonnes de cartes de hauteur égale ?

Création de cartes Bootstrap de hauteur égale dans des colonnes de cartes

Dans Bootstrap 4, la classe card-columns est utilisée pour afficher les cartes dans des colonnes , mais la hauteur des cartes peut varier en fonction de leur contenu. Pour obtenir des cartes de hauteur égale, nous pouvons utiliser une combinaison de CSS et de flexbox.

Solution :

Au lieu de définir une hauteur minimale fixe sur les cartes, nous pouvons utiliser l'utilitaire align-items-stretch sur les éléments de colonne dans les colonnes de la carte. Cela permet aux colonnes de s'étendre sur toute la hauteur de la carte la plus haute.

.card-columns .col {
    align-items: stretch;
}

Mise en œuvre :

Emballez vos colonnes de cartes dans un conteneur et chaque carte dans un colonne comme suit :

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
    </div>
</div>

Remarque :

• Assurez-vous que les largeurs de colonne (col-lg-4 dans cet exemple) sont égales pour toutes les colonnes.
• S'il y a un arrière-plan ou des bordures sur les cartes, vous devrez peut-être ajuster le CSS pour vous assurer que les bordures et les arrière-plans sont alignés. correctement.

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!