Bootstrap水平导航菜单内按钮导致文字错位问题如何修复？

问题产生原因 #

• 你给Logout的a标签同时设置了nav-link和btn两类样式，Bootstrap自带的这两个类的盒模型规则存在冲突：btn类默认上下内边距为0.375rem、行高为1.5，而导航栏场景下的nav-link默认上下内边距为0.5rem，两者最终计算出的元素高度不一致。
• 导航栏的li元素默认采用基线对齐规则，高度更高的Logout按钮会把相邻的Profile链接顶到偏上的位置，最终出现错位。

修复方案 #

方案1：移除多余btn类（最推荐） #

你当前Logout按钮用的是btn-link样式，仅需nav-link加text-dark就能实现完全一致的文字链接视觉效果，不需要保留btn相关类，直接修改标签代码即可：

<a id="logout" class="nav-link text-dark">Logout</a>

该方案没有多余样式冲突，也不会影响原有点击等功能。

方案2：新增垂直对齐类兼容 #

如果有业务需求必须保留btn类，给Logout所在的nav-item加align-self-center类，强制元素垂直居中对齐即可：

<li class="nav-item align-self-center">
    <a id="logout" class="nav-link btn btn-link text-dark">Logout</a>
</li>

也可以给所有同层级的nav-item都加上该类，保证所有导航项的对齐规则统一。

方案3：自定义CSS覆盖冲突样式 #

如果上述两种方案都不适用，可新增自定义CSS统一两个元素的盒模型参数：

#logout.btn.nav-link {
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: inherit;
}

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