如何将Bootstrap导航项底部边框与导航栏底部对齐？

要让导航项的底部边框和80px高度的Navbar底部对齐，只需要调整定位逻辑和内边距即可，核心是让标识边框的伪元素直接对齐Navbar的底部边缘。

修改步骤及原因 #

1. 移除Navbar默认底部内边距：Bootstrap的Navbar默认带底部内边距，会导致边框和Navbar底部出现空隙，设置padding-bottom: 0消除这个间距。
2. 调整伪元素的定位容器：把伪元素的定位从.nav-link转移到.nav-item，并设置.nav-item为相对定位，这样伪元素可以基于导航项的范围定位到底部。
3. 让伪元素对齐Navbar底部：将伪元素的bottom值设为0，直接贴合Navbar的底部边缘。
4. 用padding控制导航链接的垂直位置：去掉.nav-link的固定高度，改用上下padding让文字在80px高的Navbar中保持垂直居中，同时避免高度限制导致的布局错位。

修改后的完整代码 #

HTML（移除无用的.narrow-bar元素）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarNav"
    aria-controls="navbarNav"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#"
          >Home<span class="sr-only">(current)</span></a
        >
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

CSS

<style>
  .navbar {
    height: 80px;
    display: flex;
    align-items: center;
    padding-bottom: 0; /* 移除默认底部内边距 */
  }

  .navbar-nav {
    display: flex;
    justify-content: space-between;
  }

  .nav-item {
    position: relative; /* 设置为伪元素的定位容器 */
  }

  .navbar-nav .nav-link {
    border-bottom: 2px solid transparent;
    text-align: center;
    padding: 1rem 0.5rem; /* 用padding控制垂直居中，替换固定height */
  }

  .navbar-nav .nav-item.active::after {
    content: "";
    position: absolute;
    bottom: 0; /* 对齐Navbar底部 */
    left: 0;
    right: 0;
    height: 2px;
    background-color: #007bff;
  }
</style>

这样修改后，无论Navbar设置多少高度，只要调整.nav-link的上下padding保证文字居中，底部标识边框都会精准对齐Navbar的底部边缘。

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