Bootstrap 4：卡片组+卡片：如何获得相同的高度？
Posted
技术标签:
【中文标题】Bootstrap 4：卡片组+卡片：如何获得相同的高度？【英文标题】：Bootstrap4 : CardDeck + Card : How to get same height? 【发布时间】：2020-10-03 01:04:31 【问题描述】：我试图按照这个问题的问题+答案：Bootstrap4 make card headers the same height，但是我无法让它工作。
我的html代码是这样的：
<div class="card-deck">
<div class="card m-xs-1 m-2" style="">
<div class="card-header" style="">
<div class="card-text text-left" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia.
</div>
</div>
<div class="card-body" style="">
<div class="card-text text-left" style="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
</div>
<div class="card-text text-left" style="">
<br>
</div>
</div>
<div class="card-footer" style="">
<div class="card-text text-muted text-left" style="">
<small>text</small>
</div>
</div>
</div>
<div class="card m-xs-1 m-2" style="">
<div class="card-header" style="">
<div class="card-text text-left" style="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
</div>
</div>
<div class="card-body" style="">
<div class="card-text text-left" style="">
Lorem ipsum dolor sit amet
</div>
<div class="card-text text-left" style="">
<br>
</div>
</div>
<div class="card-footer" style="">
<div class="card-text text-muted text-left" style="">
<small>text2</small>
</div>
</div>
</div>
</div>
目前呈现为：
更新
当我第二张卡片中的文字字符较少时，答案中的代码仍然不正确：
【问题讨论】：
【参考方案1】：根据您的要求使用以下代码：
<!DOCTYPE html>
<html>
<head>
<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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card-deck">
<div class="card m-xs-1 m-2" style="">
<div class="card-header d-flex align-items-center h-100" style="">
<div class="card-text text-left" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia.
</div>
</div>
<div class="card-body d-flex align-items-center h-100" style="">
<div class="card-text text-left" style="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
</div>
<div class="card-text text-left" style="">
<br>
</div>
</div>
<div class="card-footer" style="">
<div class="card-text text-muted text-left" style="">
<small>text</small>
</div>
</div>
</div>
<div class="card m-xs-1 m-2" style="">
<div class="card-header d-flex align-items-center h-100" style="">
<div class="card-text text-left" style="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
</div>
</div>
<div class="card-body d-flex align-items-center h-100" style="">
<div class="card-text text-left" style="">
Lorem ipsum dolor sit amet.
</div>
<div class="card-text text-left" style="">
<br>
</div>
</div>
<div class="card-footer" style="">
<div class="card-text text-muted text-left" style="">
<small>text2</small>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
目前我只是使用javascript来设置标题的高度。以上是关于Bootstrap 4：卡片组+卡片：如何获得相同的高度？的主要内容，如果未能解决你的问题，请参考以下文章