本文介绍如何使用 bootstrap 5 的 flexbox 布局替代传统浮动和内联样式，实现卡片内姓名左对齐、数值右对齐且垂直居中的专业排版效果。
在构建排行榜类 UI（如团队绩效看板）时，常需在 Bootstrap 卡片中并排展示人员姓名与对应数值（如积分、完成数），并确保数值始终严格右对齐、与姓名文字垂直居中——但直接使用 float-right、text-align: right 或 pull-right（Bootstrap 4 已弃用）往往失效，尤其当姓名长度不一或容器未启用弹性布局时。
根本原因在于：原代码中 <div style="display: inline-block;"> 将姓名与数值包裹在同一行内联块中，而 float-right 会脱离文档流，导致父容器无法正确计算高度与对齐基准；同时，padding-left: 200px 属于硬编码偏移，缺乏响应性且易错。
✅ 推荐解法：启用 Flexbox 布局，使用 d-flex justify-content-between align-items-center
以下是优化后的标准写法（兼容 Bootstrap 5+，语义清晰、无内联样式污染）：
<div class="card" style="width: 350px; margin-right: 100px;">
<ul class="list-unstyled card-body mb-0 pb-0">
<li class="media mb-3">
<div class="media-body d-flex justify-content-between align-items-center">
<strong class="fs-5">Jordan</strong>
<span class="fw-bold fs-5">12</span>
</div>
<div class="progress mb-1 mt-2" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 50%; background-color: green;"
aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</li>
</ul>
</div>? 关键改进说明：
- 移除所有 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，提升可维护性；
- 进度条与主体内容分离，避免嵌套干扰对齐逻辑。
⚠️ 注意事项：
- 若需支持多行姓名（如带职位后缀），建议将 <strong> 包裹在 flex-grow-1 容器中，防止数值被挤出视口；
- 在 EJS 循环中，确保每项 <li> 独立拥有该结构，避免外层 d-flex 影响整体列表流式布局；
- 如需响应式适配（如移动端堆叠显示），可叠加 flex-column flex-md-row 类。
此方案不仅解决对齐问题，更符合现代 CSS 布局规范，代码简洁、可扩展性强，适用于各类数据卡片场景。
