我们可以给 <img> 添加 .card-img-top(图片在文字上方) 或 .card-img-bottom(图片在文字下方 来设置图片卡片: <div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title"> John Doe</h4> <p class="card-text"> Some example text.</p> <a href="#" class="btn btn-primary"> See Profile</a> </div></div> 如果图片要设置为背景,可以使用 .card-img-overlay 类: <div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title"> John Doe</h4> <p class="card-text"> Some example text.</p> <a href="#" class="btn btn-primary"> See Profile</a> </div></div>
|
|
来自: johnny_net > 《bootstrap》