【发布时间】：2019-07-03 22:48:50
【问题描述】：
我的卡片页脚中有一个按钮组，占用了一些空间。之前，我将每张卡片放在div 中，如下所示：
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3"></div>
但是，现在我想确保卡片的高度相同。我尝试使用卡片组来做到这一点。我能够获得正确的高度，但是现在卡片彼此相邻的时间太长，并且按钮组超出了卡片。这是它的样子：
我尝试将 col-12 的内容添加到卡片标签中，如下所示：
<div class="card col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col"></div>
不幸的是，这并没有做任何事情。如何实现两个目标：按钮组的高度相同且宽度足够？
特别是，我希望能够结合 Bootstrap 的网格系统使用 card-deck 的高度功能，以便列像这样开始：
||||
然后变成这样：
||
||
然后终于变成了这样：
|
|
|
|
编辑 - 完整代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row card-deck">
<div class="card my-3">
<div class="card-body">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Date</h6>
<p class="card-text">Description</p>
</div>
<div class="card-footer">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary viewActivity">View</button>
<button type="button" class="btn btn-success editActivity">Edit</button>
<button type="button" class="btn btn-danger deleteActivity">Delete</button>
</div>
</div>
</div>
</div>解决方案
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.card{
height:100%;
}
</style>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 card-col mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"></h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text"></p>
</div>
<div class="card-footer">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary viewActivity">View</button>
<button type="button" class="btn btn-success editActivity">Edit</button>
<button type="button" class="btn btn-danger deleteActivity">Delete</button>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
提供实际代码而不是图像。我们应该编写我们在图像中看到的代码并继续浪费时间还是只使用您提供给我们的代码？ :)
-
@weegee 我提供了更多细节。谢谢！
标签： html css bootstrap-4