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

我用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，他的角色發生了變化:工程師cher cheur astro physique haute energy & quot；相反& quotCDD IT信息& quot所以這一行需要兩行而不是一行。因此用戶2的卡具有不同于其他卡的高度。

我該怎么解決呢？ 我不知道卡的大小，所以我不能隱式地修復它(無論如何，這可能不是一個好主意)。

附注:如果標志有不同的尺寸，我也有同樣的問題。盡管有img-fluid、widht、max-widht、max-height等標志，但有些標志會改變卡片的高度。但是我想首先我必須解決簡單的身高問題。

col元素已經具有相同的高度——Bootstrap V5基于flexbox的網格實現已經注意到了這一點。

你需要做的就是讓這些卡片的高度達到它們父母的100%:

.card { height: 100%; }

感謝貢獻一個堆棧溢出的答案！

請務必回答問題。提供詳細信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應其他答案。根據意見發表聲明；用參考資料或個人經歷來支持他們。要了解更多，請查看我們關于撰寫精彩答案的提示。