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

雷雷

Answer 2

col 元素已经具有相同的高度 - Bootstrap v5 基于 Flexbox 的网格实现已经做到了这一点。

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

.card { height: 100%; }