【问题标题】:how to put <a> tag at top right corner of card with bootstrap?如何使用引导程序将 <a> 标签放在卡片的右上角?
【发布时间】:2021-12-31 17:52:01
【问题描述】:

我有一张背景有图片的卡片

  <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"><i class="fas fa-pen"></i></a>
        <h1 class="card-title text-white text-center ">{{$category->name}}</h1>
      </div>
    </div>
  </div>

有我想放在右上角的钢笔图标

【问题讨论】:

    标签: html css bootstrap-4


    【解决方案1】:

    试用位置实用程序类。

    https://getbootstrap.com/docs/5.1/utilities/position/

    例如:

    <div class="card position-relative">
      <!-- other elements -->
      <a class="text-right position-absolute top-0 end-0"><i class="fas fa-pen"></i></a>
    </div>
    

    了解更多关于 CSS 位置的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/position

    【讨论】:

      猜你喜欢
      • 2022-01-13
      • 2019-10-06
      • 1970-01-01
      • 2019-11-09
      • 2020-09-19
      • 2022-07-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多