You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Bootstrap卡片高度与宽度设置异常的解决求助

Bootstrap卡片高度与宽度设置异常的解决求助

各位好,我遇到了一个Bootstrap卡片布局的问题:我给所有卡片图片指定了固定的高宽,但卡片整体的高度却没法保持一致,有的卡片高一些,有的又矮一些,其中左数第二张图片对应的卡片高度明显偏大。我希望所有卡片能拥有完全相同的高度和宽度,请问该怎么解决这个问题呢?

我目前尝试的代码如下:

CSS 代码

.card {
height: 50%;
width: 50%;
}

.card {
background-color: #f8f9fa;
}

.card-body {
padding: 15px;
}

.card-img-top {
height: 200px;
width: 100%;
object-fit: cover;
}

.card .btn {
background-color: #007bff;
color: #fff;
}

HTML 代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">

<div class="col-md-3 mb-4">
<div class="card">
<img th:src="@{/images/denim/BlackJen.jpg}" class="card-img-top" alt="Jeans Pant 1">
<div class="card-body">
<h5 class="card-title">Jeans Pant 1</h5>
<p class="card-text">Price: ₹49.99</p>
<a href="product1.html" class="btn btn-primary btn-block">View Details</a>
</div>
</div>
</div>

<div class="col-md-3 mb-4">
<div class="card">
<img th:src="@{/images/denim/blueJean.jpg}" class="card-img-top" alt="Jeans Pant 1">
<div class="card-body">
<h5 class="card-title">Jeans Pant 1</h5>
<p class="card-text">Price: ₹49.99</p>
<a href="product1.html" class="btn btn-primary btn-block">View Details</a>
</div>
</div>
</div>

<div class="col-md-3 mb-4">
<div class="card">
<img th:src="@{/images/denim/lightGray.jpg}" class="card-img-top" alt="Jeans Pant 1">
<div class="card-body">
<h5 class="card-title">Jeans Pant 1</h5>
<p class="card-text">Price: ₹49.99</p>
<a href="product1.html" class="btn btn-primary btn-block">View Details</a>
</div>
</div>
</div>

<div class="col-md-3 mb-4">
<div class="card">
<img th:src="@{/images/denim/LightGrayJe.jpg}" class="card-img-top" alt="Jeans Pant 1">
<div class="card-body">
<h5 class="card-title">Jeans Pant 1</h5>
<p class="card-text">Price: ₹49.99</p>
<a href="product1.html" class="btn btn-primary btn-block">View Details</a>
</div>
</div>
</div>

</div>

目前的问题是卡片高度不一致,尤其是左数第二张图的卡片高度明显过大,希望大家能帮我找出问题所在,给出可行的解决方案,谢谢!

备注:内容来源于stack exchange,提问作者Mama

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.21 12:42:58