我正在尝试将卡片中的文本和按钮对齐到右下角,但我无法让它们正确对齐。
这是我的代码:
<div class="col-sm-3 text-right my-auto">
<div class="card text-white text-right d-flex">
<img src="images\col_img_2.jpeg" class="card-img" alt="...">
<div class="card-img-overlay justify-items-end d-flex align-items-end">
<h5 class="card-title">Project 2</h5>
<a href="#" class="btn btn-primary">Lees verder</a>
</div>
</div>
</div>
</div>
这就是结果:
有人知道怎么修这个东西吗?感谢您的好意!
我想到了。我在'h5'元素上使用mt-auto修复它!这会将'h5'元素和'a'元素推送到卡片的底部。
<div class="col-sm-3 text-right my-auto">
<div class="card text-white text-right d-flex">
<img src="images\col_img_2.jpeg" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-end flex-column">
<h5 class="card-title mt-auto">Project 2</h5>
<a href="#" class="btn btn-primary">Lees verder</a>
</div>
</div>
</div>