将导航项的下边框与导航栏对齐

问：

有没有办法将引导导航项的下边框与导航栏的下边框对齐？我想使用底部边框来显示选择了哪个元素。我能够使用导航栏的默认高度来做到这一点。一旦我增加到底部边框就不再对齐了。height80px

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>

谢谢！！