这就是我的卡片在 1 行中有多余卡片时发生的情况,即使图像尺寸不同,我也需要它具有准确的高度和宽度。这也在 BOOTSTRAP 3 中
.card {
background-color: #fff;
border: 1px solid transparent;
border-radius: 6px;
}
.card>.card-link {
color: #333;
}
.card>.card-link:hover {
text-decoration: none;
}
.card>.card-link .card-img img {
border-radius: 6px 6px 0 0;
}
.card .card-img {
position: relative;
padding: 0;
display: table;
}
.card .card-img .card-caption {
position: absolute;
right: 0;
bottom: 16px;
left: 0;
}
.card .card-body {
display: table;
width: 100%;
padding: 12px;
}
.card .card-header {
border-radius: 6px 6px 0 0;
padding: 8px;
}
.card .card-footer {
border-radius: 0 0 6px 6px;
padding: 8px;
}
.card .card-left {
position: relative;
float: left;
padding: 0 0 8px 0;
}
.card .card-right {
position: relative;
float: left;
padding: 8px 0 0 0;
}
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
</div>
</div>
我需要保持相同的宽度和高度,这样就不会发生谢谢你:(((
最佳答案
您需要进行一些调整。我已经记录了源代码中的更改。
主容器变成了flexbox .因为 flexbox 元素的默认值是 stretch , 所有卡片的高度都相同。
图片下方的所有内容都在一个单独的容器中,并与卡片底部对齐。
/* Added */
.overview {
display: flex;
}
.card-default {
display: flex;
flex-wrap: wrap;
}
.card-default>* {
width: 100%;
}
.excludingImage {
align-self: flex-end;
text-align: center;
}
/* End Added */
.card {
background-color: #fff;
border: 1px solid transparent;
border-radius: 6px;
}
.card>.card-link {
color: #333;
}
.card>.card-link:hover {
text-decoration: none;
}
.card>.card-link .card-img img {
border-radius: 6px 6px 0 0;
}
/*
.card .card-img {
position: relative;
padding: 0;
display: table;
}
.card .card-img .card-caption {
position: absolute;
right: 0;
bottom: 16px;
left: 0;
}
*/
.card .card-body {
/* display: table;
width: 100%; */
padding: 12px;
}
.card .card-header {
border-radius: 6px 6px 0 0;
padding: 8px;
}
.card .card-footer {
border-radius: 0 0 6px 6px;
padding: 8px;
}
/*
.card .card-left {
position: relative;
float: left;
padding: 0 0 8px 0;
}
.card .card-right {
position: relative;
float: left;
padding: 8px 0 0 0;
}
*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Class overview is added -->
<div class="col-xs-6 col-sm-3 overview">
<div class="card card-default">
<div class="card-img">
<img src="https://via.placeholder.com/120x100" alt="Card image" class="img-thumbnail" height="100">
</div>
<!-- Extra div added to enable alignment at bottom -->
<div class="excludingImage">
<div class="card-body">
<p class="card-text" style="color:#00873a"><b>Cart name</b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
</div>
<div class="card-footer text-center">
<a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
</div>
</div>
<div class="card card-default">
<div class="card-img">
<img src="https://via.placeholder.com/120x150" alt="Card image" class="img-thumbnail" height="100">
</div>
<!-- Extra div added to align at bottom -->
<div class="excludingImage">
<div class="card-body">
<p class="card-text" style="color:#00873a"><b>Cart name</b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
</div>
<div class="card-footer text-center">
<a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
</div>
</div>
</div>
关于html - 相同高度和宽度的网格 col 卡 html css BOOTSTRAP 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53058889/