这可能很简单，但我不知道如何解决它。
我使用 Bootstrap5。
完整代码在这里： https://www.codeply.com/p/BywuhLNUXy
似乎 codeply 有一些问题...... 所以我也把它放在jsfiddle上
https://jsfiddle.net/paul_z/y7a6dnkf/1/
主要是联系人目录页面。 代码结构为
2
963<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 等，但有些徽标会改变卡片的高度。但我认为首先我必须解决简单的高度问题。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
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 helpscol元素已经具有相同的高度 - Bootstrap v5 基于 Flexbox 的网格实现已经做到了这一点。您需要做的就是使卡片占据其父卡片的 100% 高度：
.card { height: 100%; }