[英]How do you align text to bottom left in card-body
I'm using bootstrap 5in an MVC application and trying to align text to bottom left.我在 MVC 应用程序中使用 bootstrap 5 并尝试将文本对齐到左下角。 The text should be aligned to bottom left when you hover over a card to see extra info.当您 hover 在卡片上查看额外信息时,文本应与左下角对齐。 However I try I can't seem to make it work.但是我尝试似乎无法使其工作。
@for (var j = 0; j
< 3 && i + j < arrivaltestresult.Count; j++) { <div class="col-4 p-0 text-center">
<div class="card">
<img src="https://via.placeholder.com/350x350" class="card-img-top" alt="...">
<div class="card-body text-light text-start text-left bottom-align-text">
<div class="display-flex">
<h5>@arrivaltestresult[i+j].Name</h5>
<div class="extra-info mt-auto">
<p>@arrivaltestresult[i+j].Category</p>
<p class="@(@arrivaltestresult[i+j].DiscountPrice > 0 ? " text-decoration-line-through " :"d-none ")">@arrivaltestresult[i+j].Price</p>
<p class="price-text">@(@arrivaltestresult[i+j].DiscountPrice > 0 ? @arrivaltestresult[i+j].DiscountPrice: @arrivaltestresult[i+j].Price)</p>
</div>
</div>
</div>
</div>
</div>
first = false; }
I've added a picture to show how it looks currently.我添加了一张图片来展示它目前的样子。
style="margin-left:0px;margin-botton:0px"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.