本文介绍如何使用 bootstrap 5 的 flexbox 布局替代传统浮动和内联样式，实现卡片内姓名左对齐、数值右对齐且垂直居中的专业排版效果。

在构建排行榜类 UI（如团队绩效看板）时，常需在 Bootstrap 卡片中并排展示人员姓名与对应数值（如积分、完成数），并确保数值始终严格右对齐、与姓名文字垂直居中——但直接使用 float-right、text-align: right 或 pull-right（Bootstrap 4 已弃用）往往失效，尤其当姓名长度不一或容器未启用弹性布局时。

根本原因在于：原代码中

✅ 推荐解法：启用 Flexbox 布局，使用 d-flex justify-content-between align-items-center

以下是优化后的标准写法（兼容 Bootstrap 5+，语义清晰、无内联样式污染）：

  

    

      
        Jordan
        12
      
      
        
        
      
    
  

? 关键改进说明：

• 移除所有 float, pull-right, inline-block 及硬编码 padding-left；
• 将 .media-body 设为 d-flex 容器，并添加 justify-content-between（左右撑满）与 align-items-center（垂直居中）；
• 使用 Bootstrap 5 内置工具类 fs-5（等效 font-size: 1.25rem）和 fw-bold 替代内联 style，提升可维护性；
• 进度条与主体内容分离，避免嵌套干扰对齐逻辑。

⚠️ 注意事项：

• 若需支持多行姓名（如带职位后缀），建议将 包裹在 flex-grow-1 容器中，防止数值被挤出视口；
• 在 EJS 循环中，确保每项
• 独立拥有该结构，避免外层 d-flex 影响整体列表流式布局；
• 如需响应式适配（如移动端堆叠显示），可叠加 flex-column flex-md-row 类。

此方案不仅解决对齐问题，更符合现代 CSS 布局规范，代码简洁、可扩展性强，适用于各类数据卡片场景。