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

É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!