我在两个网页上使用引导卡。在一页上，标题文本是固定的，因此我可以使用 min-height 来匹配其卡片标题高度。在第二页上，将生成这些卡片，因此我不知道文本长度和单词。我希望连续的所有卡头都具有相同的高度。
有没有办法根据一行中最大的卡头计算最小高度？
我已经在使用卡片组了。据我所知，这是整张卡的高度，我的问题是卡头。一般来说，卡片的高度都相同。
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-deck my-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header align-items-center d-flex
justify-content-center card-header-height">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
</div>
<div class="card-image">
<img class="img-fluid" src="img_avatar1.png">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header align-items-center d-flex
justify-content-center card-header-height">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4>
</div>
<div class="card-image">
<img class="img-fluid" src="img_avatar1.png">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header align-items-center d-flex
justify-content-center card-header-height">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
</div>
<div class="card-image">
<img class="img-fluid" src="img_avatar1.png">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Update在将列表（ul）和列表项（li）添加到卡体中后，我遇到了同样的问题。我花了几个小时才弄清楚为什么卡头高度不再起作用。确保您的 li 文本长度相似。我的其中一根线太长，所以是两行，破坏了整体外观再次查看卡片标题。
你就快到了。你只需要使用h-100类以确保高度是100%在你的card-header with d-flex
现场演示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-deck my-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
</div>
<div class="card-image">
<img class="img-fluid" src="https://via.placeholder.com/150">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4>
</div>
<div class="card-image">
<img class="img-fluid" src="https://via.placeholder.com/150">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
</div>
<div class="card-image">
<img class="img-fluid" src="https://via.placeholder.com/150">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
