引导程序图像卡文本覆盖 [英] Bootstrap image card text overlay
本文介绍了引导程序图像卡文本覆盖的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
无法将卡页脚设置为预期输出
Unable to set card footer as expected output
预期输出:
我的代码:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
</div>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
jsfiddle:: https://jsfiddle.net/sidh_41/p8sdfy7u/2/
推荐答案
<div class="row">
<div class="col-md-3">
<div class="card">
<img class="card-img" src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
</div></div>
我认为您需要在卡片周围添加另一个div.该div需要具有类row
I think you need to add another div surrounding the card. This div needs to have the class row
这篇关于引导程序图像卡文本覆盖的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文