Bootstrap卡片页脚文本右对齐跨浏览器兼容方案问询

你当前通过margin-left固定值让“Lost”在Chrome中靠右，但Edge显示不一致，核心问题是硬编码的margin值依赖浏览器字体渲染，不同浏览器可能有差异。推荐直接利用Bootstrap内置的flex布局类实现跨浏览器一致的对齐效果，无需自定义margin：

修改后的代码 #

<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 d-flex justify-content-between align-items-center">
      <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" style="color: red; font-style: normal;">Lost</p>
   </div>
</div>

关键改动说明 #

• 给card-footer添加d-flex justify-content-between align-items-center类：将页脚元素设置为flex布局，自动让内部元素左右两端对齐，同时垂直居中
• 把“Updated On”和“Lost”拆分为两个独立的<p>元素，通过flex布局自动分配空间，彻底避免了硬编码margin带来的浏览器兼容问题
• 移除了冗余的 和自定义margin-left，布局完全依赖Bootstrap的跨浏览器兼容类

内容的提问来源于stack exchange，提问作者Obraine