Maison  >  Article  >  interface Web  >  Comment obtenir des hauteurs égales pour les cartes dans les colonnes Bootstrap 4 ?

Comment obtenir des hauteurs égales pour les cartes dans les colonnes Bootstrap 4 ?

DDD
DDDoriginal
2024-10-30 06:49:02575parcourir

How to Achieve Equal Heights for Cards in Bootstrap 4 Columns?

Égaler la hauteur des cartes Bootstrap 4 dans les colonnes

Comme mentionné, le framework Bootstrap 4 implémente déjà flexbox sur les colonnes, ce qui garantit qu'elles sont initialement de la même hauteur. Pour obtenir des hauteurs de cartes égales dans ces colonnes, pensez à utiliser la classe h-100 sur les cartes. Cette classe définit la hauteur à 100 %, permettant aux cartes d'occuper pleinement l'espace disponible dans chaque colonne.

Voici un exemple de mise en œuvre de cela en utilisant h-100 :

<code class="html"><div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
    </div>
</div></code>

Cette modification garantit que les cartes de chaque colonne seront de même hauteur, quel que soit leur contenu. Il est important de noter que la classe .card-deck, qui contenait auparavant les cartes, n'est plus nécessaire.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn