html - 如何在 Bootstrap 导航栏中添加边框底部悬停效果？

Question

我正在尝试像这样向引导程序中的导航栏添加边框底部悬停效果

但我得到这样的结果

我需要将边框底部一直移动到导航栏底部。

.nav-link:visited,
.nav-link:link {
  border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link:active {
  border-bottom: 2px solid #1bcfc6;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="./home.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./about.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./product.html">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./contact.html">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

标签： htmlcssbootstrap-4navbar

Answer 1

它是由引导类在导航栏元素上设置的默认填充引起的。您可以使用Bootstrap 类 pb-0和pt-0. Padding Bottom 0 和 Padding Top 0 是这些类的扩展。您可能只需要 pb-0 但 pt-0 以便文本在垂直侧的间距不均匀。

当导航栏在较小的屏幕上折叠时，全屏查看以下输出。

.nav-link:visited,
.nav-link:link {
  border-bottom: 2px solid transparent;
}

.nav-link:hover,
.nav-link:active {
  border-bottom: 2px solid #1bcfc6;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg navbar-dark bg-dark pt-0 pb-0">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="./home.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./about.html">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./product.html">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

</nav>

输出：