如何解决如何在 boostrap 4 卡底部放置按钮?
是否可以在 boostrap 卡的垂直端放置按钮?卡片会自动填充空白空间以保持所有高度相同,但是如何在卡片末尾放置一个按钮而不考虑特定卡片的高度?
解决方法
您可以简单地将按钮添加到卡片页脚(Bootstrap 中的 card-footer 类)并设置页脚背景颜色和边框的样式,使其在视觉上看起来像是卡片正文的一部分。 看一下这个: Codepen
.card {
border-radius: 10px !important;
box-shadow: 0 0 15px 0 rgba(0,0.2);
}
.card-header {
border-radius: 10px 10px 0 0 !important;
background-color: #FCCF23 !important;
}
.card-footer {
border-radius: 0 0 10px 10px !important;
background-color: white !important;
border: 0 !important;
}
.card-footer p {
display: none;
}
.card-footer button {
color: #FCCF23;
background-color: #52134B;
font-weight: 500;
border: 0;
border-radius: 5px;
padding: 8px 15px;
transition: all .5s;
}
.card-footer button:hover {
color: #52134B;
background-color: #FCCF23;
transition: all .5;
}
/*delete the following codes to make footer totally invisible*/
.card-footer {
border-top: dashed 2px rgba(0,.05) !important;
}
.card-footer p {
display: block;
color: rgba(0,.1);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card b-0 w-50 m-5 text-center">
<h4 class="card-header border-0 p-4">I am a Bootstrap Card Header</h4>
<p class="card-body p-4">I am a Bootstrap card Body. You can add as many texts as you want here,yet,the button will be remained at the bottom of the card!</p>
<div class="card-footer pt-0 pb-4 px-4">
<p class="my-2">I am an 'invisible' Bootstrap Card Footer</p>
<button type="submit">hover me!</button>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。