Bootstrap项目中div内按钮不对齐，后续按钮位置偏低如何解决？

• Bootstrap 的 .btn 类默认属性为 display: inline-block，垂直对齐默认值为 baseline，会让元素基于文本基线对齐。
• 代码中多个 <button> 标签之间存在换行/空白字符，同时按钮内部的文本前后也带换行缩进，不同长度的文本结合基线对齐规则，就会出现后续按钮位置偏低的情况；放置三个按钮时后两个对齐，是因为二者的基线计算逻辑一致，均和第一个按钮存在偏差。
• 自定义的全局 button 样式只加了 margin: 2px，没有统一调整垂直对齐属性，进一步放大了错位问题。

全局修复（适配全项目范围的同类问题） #

直接在全局CSS中补充按钮对齐规则即可一劳永逸解决问题：

/* 方案1：统一修改按钮垂直对齐属性，改动最小 */
.btn {
  vertical-align: middle;
}

/* 方案2：如果项目中按钮大多成组放置，可统一给按钮容器加弹性布局，间距更可控 */
.btn-wrap {
  display: flex;
  align-items: center;
  gap: 2px; /* 可代替原button的margin属性，避免边距重叠问题 */
}

局部临时修复 #

如果只需要修复当前表格场景的问题，直接给按钮外层的div加上弹性布局属性即可：

<td>
  <div style="display: flex; align-items: center; gap: 2px;">
    <button class="btn btn-secondary action btn-sm" (click)=navigateToDetails(financialPlatform.publicIdentifier)>
      {{ 'general.button.details' | translate }}
    </button>
    <button class="btn btn-secondary action btn-sm" (click)="navigateToPlatforms(financialPlatform.publicIdentifier)">
      {{'financial.institutions.overview.button.platforms' | translate}}
    </button>
  </div>
</td>

额外优化提示：你也可以去掉按钮标签内部文本前后的多余缩进和换行，能进一步降低基线对齐偏差的概率，但效果不如上述布局修改彻底。

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