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
相关产品推荐
相关产品推荐

