Html 将导航项目底部边框与导航栏对齐

有没有办法将 bootstrap 导航项目的下边框与导航栏的下边框对齐？我想使用底部边框来显示 Select 了哪个元素.使用导航栏的默认高度，我可以做到这一点.一旦我将height增加到80px，底部边框就不再对齐了.

Html:

  <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">
          <a class="nav-link active" href="#"
            >Home<span class="sr-only">(current)</span></a
          >
          <div class="narrow-bar"></div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
          <div class="narrow-bar"></div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
          <div class="narrow-bar"></div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
          <div class="narrow-bar"></div>
        </li>
      </ul>
    </div>
  </nav>

和css:

     <style>
      .navbar {
        height: 80px;
        display: flex;
        align-items: center;
      }
      .navbar-nav {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .navbar-nav .nav-link {
        border-bottom: 2px solid transparent;
        position: relative;
        text-align: center;
        width: 100%;
        height: 3rem;
      }

      .navbar-nav .nav-link.active::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #007bff;
      }
    </style>

谢谢！！