如何使用Bootstrap将<a>标签置于带背景图的卡片右上角

你可以直接使用Bootstrap原生工具类实现需求，无需额外编写自定义CSS：

实现思路 #

你的card-img-overlay已经配置了d-flex flex-column弹性列布局，只需要给钢笔图标对应的<a>标签添加两个工具类即可：

• ms-auto：给元素添加左侧自动外边距，将元素推到容器最右侧
• mb-auto：给元素添加底部自动外边距，将元素推到容器最顶部

如果需要避免图标贴边，还可以额外添加mt-2、me-2这类边距工具类调整间距。

修改后完整代码 #

<div class="col-12 col-sm-8 col-md-6 col-lg-4 mt-4">
  <div class="card">
    <img class="card-img" style="filter: brightness(75%);" src="{{$category->photo}}">
    <div class="card-img-overlay text-white d-flex flex-column justify-content-center">
      <a class="text-right ms-auto mb-auto mt-2 me-2"><i class="fas fa-pen"></i></a>
      <h1 class="card-title text-white text-center ">{{$category->name}}</h1>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Swift Solutions