将引导卡页脚内的文本右对齐

Question

在引导卡页脚中，我试图在右侧显示“丢失”状态。问题是，如果我在 Chrome 中留出一些余量来修复它，那么它在 Microsoft Edge 浏览器中看起来就不一样了。我将如何管理它以便它在所有浏览器上都能正常工作。 以下是我在小提琴中尝试过的内容。

    <div  class="card tile-card">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">ABC</p>
         <p class="text-xs mb-0 tile-subtitle-p">PQR</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;font-style:italic">123</p>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023 &nbsp;&nbsp;&nbsp;&nbsp; 
      <span style="color: red; font-style: normal; margin-left:26px;">Lost</span></b></p>
   </div>
</div>

我的小提琴链接

Answer 1

要在不同浏览器中以一致的方式将 “Lost” 状态对齐到卡片页脚的右侧，您可以使用 Bootstrap 的

ml-auto

类。此类将元素的左边距设置为 auto，这会导致元素被推到其容器的右侧。

使用

ml-auto

将 “丢失” 状态与卡页脚的右侧对齐。

代码：

<div class="card-footer p-3 d-flex justify-content-between">
  <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023</b></p>
  <p class="tile-subtitle-p tile-subtitle-footer mb-0 ml-auto"><span style="color: red; font-style: normal;"><b>Lost</b></span></p>
</div>

并将

d-flex

和

justify-content-between

添加到卡页脚，使其成为弹性容器并将其子项与左侧和右侧对齐。使用

ml-auto

到 “Lost” 状态元素将其推到容器的右侧。

JSFiddle：结果