我有一張背景有影像的卡片
<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>
有我想放在右上角的鋼筆圖示
uj5u.com熱心網友回復：
嘗試位置實用程式類。
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/362875.html
標籤：html css bootstrap-4
下一篇：FullCaledar不顯示事件