Bootstrap-Spalten haben die gleiche Höhe

Question

Das mag einfach sein, aber ich weiß nicht, wie ich es beheben kann.

Ich verwende Bootstrap5.

Vollständiger Code hier: https://www.codeply.com/p/BywuhLNUXy

Es scheint, dass Codeply einige Probleme hat ... Also habe ich es auch auf jsfiddle gesetzt

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

Hauptsächlich die Kontaktverzeichnisseite. Die Codestruktur ist

<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>
    
    ...

Auf dem großen Bildschirm werden zwei Karten in Spalten angezeigt.

Das Problem ist, dass die Karten teilweise unterschiedliche Höhen haben. Für Benutzer 2 ändert sich beispielsweise seine Rolle zu: „Enseignant Chercheur Astrophysicalque Hautes Energies“ statt „CDD IT Informatique“, sodass diese Zeile zwei Zeilen statt einer erfordert. Die Karte von Benutzer 2 hat also eine andere Höhe als die anderen Karten.

Wie kann ich es lösen? Ich kenne die Größe der Karte nicht, daher kann ich sie nicht implizit reparieren (was wahrscheinlich sowieso keine gute Idee ist).

P.S.: Ich hätte das gleiche Problem, wenn die Logos unterschiedliche Größen hätten. Einige Logos ändern die Höhe der Karte, obwohl img-fluid, widht, max-widht, max-height usw. verwendet werden. Aber ich denke, zuerst muss ich das einfache Höhenproblem lösen.

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 元素已经具有相同的高度 - Bootstrap v5 基于 Flexbox 的网格实现已经做到了这一点。

您需要做的就是使卡片占据其父卡片的 100% 高度：

.card { height: 100%; }