如何实现Bootstrap 5卡片（card）头部的文本右对齐

问题原因 #

你之前的方案失效有两个核心原因：

1. text-end 仅作用于块级元素时才能让内部文本右对齐，你给行内元素 <span> 添加该类时，span宽度默认和内容一致，看不到对齐效果
2. Bootstrap 5 已将原来的 float-right 重命名为 float-end，旧类名、Bootstrap 3 时代的 pull-right 都已废弃不再生效

适配 Bootstrap 5 的两种解决方案 #

方案1：弹性盒布局（官方推荐，无浮动塌陷问题）

给 .card-header 添加 Bootstrap 5 内置的弹性盒工具类即可，无需修改子元素原有代码：

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <a href="/users">Users</a>
    <span class="text-muted">
           48
    </span>
  </div>
  <div class="card-body">
     <p>Card content</p>
  </div>
</div>

新增类说明：

• d-flex：将卡片头部转为弹性盒容器
• justify-content-between：子元素分别贴左右两端对齐
• align-items-center：两个子元素垂直居中对齐，避免高度不一致出现错位

方案2：浮动方案（适合不想修改父元素样式的场景）

直接给右侧 span 添加 Bootstrap 5 的浮动类 float-end 即可：

<div class="card">
  <div class="card-header">
    <a href="/users">Users</a>
    <span class="float-end text-muted">
           48
    </span>
  </div>
  <div class="card-body">
     <p>Card content</p>
  </div>
</div>

如果后续头部内有其他元素出现高度塌陷，给 .card-header 加个 clearfix 类即可解决。

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