如何解决我可以不使用响应式解决此问题吗?
我在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;
}
谢谢,祝你有美好的一天!
解决方法
您可以给flex box灌水,并帮助自己使用Bootstrap 4类:
可能会运行整个页面来测试行为
/* here comes your custom css missing in bootstrap */
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/><div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
<div class="card flex-grow-1 d-flex flex-column" >
<img src="http://dummyimage.com/200x50" class="card-img-top" alt="...">
<div class="card-body flex-grow-1 d-flex flex-column ">
<h5 class="card-title mx-auto">Massage <br>Therapy</h5>
<p class="card-text mx-auto">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 alert alert-info mx-auto">read more</button>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
<div class="card flex-grow-1 d-flex flex-column">
<img src="http://dummyimage.com/200x50" class="card-img-top" alt="...">
<div class="card-body flex-grow-1 d-flex flex-column ">
<h5 class="card-title mx-auto">Massage Therapy</h5>
<p class="card-text my-auto">Living winged .</p>
<button class="btn btn-hover alert alert-info mx-auto">read more</button>
</div>
</div>
</div> <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
<div class="card flex-grow-1 d-flex flex-column">
<img src="http://dummyimage.com/200x50" class="card-img-top" alt="...">
<div class="card-body flex-grow-1 d-flex flex-column ">
<h5 class="card-title mx-auto">Massage </h5>
<p class="card-text my-auto">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 alert alert-info mx-auto">read more</button>
</div>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.5/utilities/display/和https://getbootstrap.com/docs/4.5/utilities/spacing/
, .cols
的高度相同,因此您可以将卡片拉伸到全部为该列的100%,因此无论内容或缩放如何,它们都将始终保持相同的高度。
.content > .container .row .card {
height: 100%;
padding: 1.9rem;
}
.content > .container .row .card {
height: 100%;
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;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<div class="container">
<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>
<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 With More Words</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>
<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 with Even More Words</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>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。