Bootstrap 4.6导航栏带dropdown的菜单项与其他项无法垂直对齐问题

问题现象 #

所有li元素高度一致为54px，但普通导航项的a元素高度为32px，带下拉菜单的导航项a元素高度为34px，存在2px高度差导致无法垂直对齐。

相关HTML结构如下：

<div class='d-flex align-items-center px-5'>
  <div class='nav d-none d-xl-block' id='nav-menu-xl'>
  <nav class='nav-menu'>
    <ul>
      <li class='nav-item'>
        <a class='nav-link' href=''>Members</a>
      </li>
      <li class='nav-item drop-down'>
        <a class='nav-link' href=''>Benefits</a>
        <ul>
          <li><a href=''>Benefit 1</a></li>

2px高度差的常见原因 #

• 盒模型不统一：两类a标签的box-sizing属性值不同，一个为content-box、一个为border-box，相同的内边距、边框计算出来的总高度存在差异
• 多余边框：下拉触发a标签默认被添加了1px上下边框，普通导航项无该样式，合计高度差刚好为2px
• 伪元素撑开高度：下拉项用于显示箭头的::after伪元素未设置正确的垂直对齐规则，默认基线对齐会额外撑高行高
• 样式优先级差异：带drop-down类的导航项下的a标签被更高优先级的规则设置了额外的上下内边距或更高的行高

修复方案 #

添加以下CSS即可统一高度，解决对齐问题：

/* 统一所有导航链接基础样式 */
.nav-link {
  box-sizing: border-box;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  border: none;
  vertical-align: middle;
}
/* 适配下拉箭头伪元素，避免撑高容器 */
.nav-item.drop-down .nav-link::after {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

如果使用Bootstrap框架，直接给下拉触发的a标签添加border-0 align-middle类即可快速修复。

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