les colonnes bootstrap ont la même hauteur

Question

Cela peut être simple mais je ne sais pas comment y remédier.

J'utilise Bootstrap5.

Code complet ici : https://www.codeply.com/p/BywuhLNUXy

Il semble que codeply ait quelques problèmes... Alors je l'ai mis sur jsfiddle aussi

https://jsfiddle.net/paul_z/y7a6dnkf/1/

Principalement la page du répertoire de contacts. La structure du code est

<div class="container">
<div class="row gy-5">

    <div class="col-lg-6">
        <div class="card m-b-30">
            <div class="card-body py-5">
                <div class="row">
                    <div class="col-lg-4 text-center">            
                    <img src="/static/logo.png" alt="logo" >            
                    </div>
                <div class="col-lg-8">
                    <h5 class="card-text mb-0"><i class="fa-solid fa-person"></i> user 1</h5>
                    <p class="card-text">CDD IT Informatique</p>
                    <hr class="dropdown-divider">                
                    <p class="card-text"><i class="fa-sharp fa-solid fa-building"></i> ###</p>        
                    <p class="card-text"><i class="fa-solid fa-envelope"></i> mail</p>        
                    <p class="card-text"><i class="fa-solid fa-phone"></i> phone</p>
               </div>
                </div>
              </div>
        </div>
    </div>
    
    ...

Sur grand écran, il affiche deux cartes en colonnes.

Le problème est que les cartes ont parfois des hauteurs différentes. Par exemple, pour l'utilisateur 2, son rôle devient : "Enseignant Chercheur Astrophysicalque Hautes Energies" au lieu de "CDD IT Informatique", cette ligne nécessite donc deux lignes au lieu d'une. La carte de l'utilisateur 2 a donc une hauteur différente de celle des autres cartes.

Comment puis-je le résoudre ? Je ne connais pas la taille de la carte, donc je ne peux pas la réparer implicitement (ce qui n'est probablement pas une bonne idée de toute façon).

P.S. : J'aurais le même problème si les logos étaient de tailles différentes. Certains logos modifient la hauteur de la carte malgré l'utilisation de img-fluid, widht, max-widht, max-height, etc. Mais je pense que je dois d’abord résoudre le simple problème de hauteur.

Answer 1

Code snippet



.card {
  height: 100%;
}




This will set the height of all cards to 100% of their parent container. This will ensure that all cards have the same height, regardless of the content inside them.

To fix the problem of the logos having different sizes, you can use the following CSS:



Code snippet
.card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}




This will set the maximum width and height of the logos to 100%. This will ensure that the logos are never larger than their parent container. The object-fit: cover property will ensure that the logos are scaled to fill their container, without distorting their aspect ratio.

I hope this helps

Answer 2

col Les éléments ont déjà la même hauteur - l'implémentation de la grille basée sur Flexbox de Bootstrap v5 le fait déjà.

Il suffit de faire en sorte que la carte occupe 100% de la hauteur de son parent :

.card { height: 100%; }