可用 d-flex + align-items- 模拟表格行垂直对齐，需确保父容器有明确高度、子项为直系元素；justify-content-between 实现列间两端对齐；align-self- 精细控制单列对齐；避免 table 与 flex 混用导致语义和样式失效。
用 d-flex + align-items-* 模拟表格行对齐
Bootstrap 5 里没有“表格式弹性布局”这个内置概念，但你可以用 d-flex + align-items-center（或 align-items-start）替代 <tr><td> 的垂直对齐效果。关键不是模仿表格标签结构，而是复现其行为：多列内容在单行内按需对齐，且互不干扰高度。<p>常见错误是直接给 <code>.row 加 align-items-center 却发现没反应——因为 .row 默认高度由内容撑开，若子项（.col）本身没内容或高度不一致，就看不到“居中”效果。
- 确保父容器有明确高度来源：比如外层加
min-height: 4rem，或子项中至少一个含文本/图片等可见内容 -
.col内部若嵌套了div，记得给它加h-100或d-flex flex-column，否则align-items-*作用域仅限于该.col自身边界，而非内部元素 - 避免在
.col上同时用float或position: absolute，它们会让align-items失效
用 justify-content-between 实现列宽自适应对齐
表格的列对齐（如左对齐标题、右对齐数值）在 Flex 布局中靠 justify-content-* 类控制主轴分布，而不是靠 text-align。比如要让姓名左贴边、积分右贴边，且中间不留空，justify-content-between 是最直接解法。
但它只在父容器为 d-flex 且子元素为**同级直系子项**时生效。如果你把姓名和数值都包在一个 div 里再丢进 .col，那 justify-content-between 就只作用于那个 div，而不是两个文字块。
- 正确结构：父
div class="d-flex justify-content-between"→ 直接放<span>姓名</span>和<span>98</span> - 别在中间加空
<div></div>或 - 响应式场景下，
justify-content-sm-between可在小屏退化为默认流式排列，避免挤压
align-self-* 覆盖整行对齐，只影响单列
当你需要某列内容（比如带图标的操作按钮）在整行中底部对齐，而其他列保持居中时，align-self-end 是唯一可控手段。它比在 .row 上设 align-items-center 更精细，且优先级更高。
但 align-self-* 不是万能的——它只对 display: flex 的直接子项起作用，也就是说，目标列必须是 .row 的直系子元素，不能套着两层 div。
- 检查 DOM 结构：
<div class="row"><div class="col align-self-end">…</div></div>✅；<div class="row"><div><div class="col align-self-end">…</div></div></div>❌ -
.row必须有可计算的高度，否则align-self-end无处可“底”——加min-height: 3rem或用h-100配合父容器高度 - 混排图标和文字时，
align-self-baseline往往比align-self-center更自然，尤其当图标尺寸与字体不一致时
table + flex 混用时的对齐陷阱
真表格（<table>）和 Flex 布局不能随意混用。比如你在 <code><td> 里加 <code>d-flex，又希望整个 <tr> 居中，结果可能错位——因为 <code><tr> 是 <code>display: table-row，不识别 align-items。
此时要么全用 Flex 模拟表格（div.d-flex 套 div.flex-fill），要么老老实实给每个 <td> 加 <code>align-top/align-middle 类。强行改 <tr> 的 <code>display 会导致表格语义丢失、屏幕阅读器误读、打印样式异常。
- 表格内垂直对齐失效，90% 是因为
<td> 里嵌了 <code>div且该div有margin或padding，把内容基准线拉偏了 - 如果用了
bootstrap-table这类插件，先关掉它的自动高度调整（常通过height: 'auto'配置），否则它会给<tr> 强加 <code>height，压制vertical-align - 响应式断点隐藏列（
d-none d-md-table-cell）后，剩余列宽度突变，可能让视觉对齐感错乱——这时要配合min-width或w-100锁定关键列宽度
对齐的本质不是“让东西看起来在一条线上”，而是控制内容相对于容器边界的定位基准。Flex 类只是快捷方式，真正起效的是 display、height、margin/padding 这些底层属性的组合。调错目标容器，再多的 align-items-center 也白搭。
