bootstrap 的列高度相同

Question

這可能很簡單，但我不知道如何解決它。

我使用 Bootstrap5。

完整程式碼在這裡： https://www.codeply.com/p/BywuhLNUXy

似乎 codeply 有一些問題... 所以我也把它放在jsfiddle上

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

主要是聯絡人目錄頁面。 程式碼結構為

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

在大螢幕上，它按列顯示兩張卡片。

問題是卡片有時高度不同。 例如，對於使用者 2，他的角色更改為：“Enseignant Chercheur Astrophysicalque Hautes Energies”而不是“CDD IT Informatique”，因此這一行需要兩行而不是一行。因此使用者 2 的卡片的高度與其他卡片不同。

我該如何解決它？ 我不知道卡片的大小，所以我無法隱式修復它（無論如何，這可能不是一個好主意）。

P.S.：如果商標尺寸不同，我也會遇到同樣的問題。儘管使用了 img-fluid、widht、max-widht、max-height 等，但有些標誌會改變卡片的高度。但我認為首先我必須解決簡單的高度問題。

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%; }