Comment faire en sorte que les cartes Bootstrap dans les colonnes de cartes aient la même hauteur sans codage en dur ?

Comment faire en sorte que les cartes Bootstrap aient la même hauteur dans les colonnes de cartes

Lorsque vous travaillez avec Bootstrap 4, vous pourriez rencontrer le besoin de créer toutes les cartes dans une disposition de colonnes de cartes, elles partagent la même hauteur. Cela garantit une apparence cohérente et visuellement agréable.

Énoncé du problème

En utilisant le texte de la documentation Bootstrap, comment pouvez-vous forcer toutes les cartes à avoir la même hauteur sans recourir à coder en dur solutions ?

Réponse

Ajout de la propriété Align-Items

Pour obtenir une hauteur de carte égale, vous pouvez tirer parti de l'alignement- propriété items sur les éléments de ligne ou de colonne contenant les cartes. Cette propriété spécifie comment les éléments flexibles sont alignés verticalement dans leur conteneur.

Option 1 : Utiliser sur la ligne

Enveloppez votre élément card-columns dans un élément row et ajoutez le classe align-items-stretch dessus. Cela alignera les cartes verticalement, en veillant à ce qu'elles s'étirent en hauteur pour correspondre à la carte la plus haute.

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

Option 2 : Utiliser sur la colonne

Vous pouvez également ajouter la classe align-items-stretch directement sur chaque élément col. Cela alignera les cartes verticalement dans chaque colonne, ce qui entraînera effectivement des hauteurs égales.

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

MISE À JOUR pour Bootstrap 5

Dans Bootstrap 5, les éléments d'alignement- la classe stretch a été remplacée par la classe align-self-stretch pour un meilleur contrôle sur chaque carte alignement.

<div class="row">
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
</div>

Remarque : L'utilisation d'align-items sur l'élément de ligne masquera les bordures des cartes, tandis que son utilisation sur l'élément de colonne ne le fera pas. Choisissez la méthode qui correspond le mieux à vos exigences de conception.

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!