如何將文本對齊到卡體的左下角

Question

我在 MVC 應用程序中使用 bootstrap 5 並嘗試將文本對齊到左下角。 當您 hover 在卡片上查看額外信息時，文本應與左下角對齊。 但是我嘗試似乎無法使其工作。

@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; }

我添加了一張圖片來展示它目前的樣子。

Answer 1

style="margin-left:0px;margin-botton:0px"