我在 Bootstrap 中使用 card 元素,每当我放大时,这 3 张卡片之间的高度是不同的(因为卡片标题)。我该如何解决这个问题,我可以在不使用响应技术@media 的情况下做到这一点吗?
这是我的 HTML 代码:
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="card">
<img src="img/card-img.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Massage Therapy</h5>
<p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
<button class="btn btn-hover">read more</button>
</div>
</div>
</div>
// I have to make the code section smaller, but 2 other cards are the same as the first one above
</div>
和 CSS:
.content > .container .row .card {
padding: 1.9rem;
}
.content > .container .row .card > .card-body {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0;
position: relative;
}
.content > .container .row .card > .card-body > h5 {
font-size: 2.3rem;
margin: 4.2rem 0 2.9rem 0;
}
.content > .container .row .card > .card-body > p {
font-size: 1.4rem;
margin-bottom: 4.5rem;
line-height: 2.6rem;
}
.content > .container .row .card > .card-body > button {
width: 14rem;
height: 4.4rem;
font-size: 1.4rem;
}
谢谢你,有一个美好的一天!