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

【问题标题】：How to add border bottom hover effect in Bootstrap navbar?如何在 Bootstrap 导航栏中添加边框底部悬停效果？
【发布时间】：2021-02-07 08:43:39
【问题描述】：

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

但我得到的结果是这样的

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

.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>

【问题讨论】：

你能分享演示链接吗？

标签： html css bootstrap-4 navbar

【解决方案1】：

您必须检查并了解 Bootstrap 中的 paddings 和 margins nav、ul、li、a 等。

如果您使用border，它将占用包括padding 在内的所有空间，因此您无法使用border 实现此目的。一般来说，我们使用 CSS 伪元素来完成这种工作，比如 CSS ::before 或 ::after 这里是一个简单的例子，希望它能帮助你实现你想要的。

<style>
  .nav {
    text-align: center;
    background: rgba(0,0,0,0.1);
  }

  .nav a {
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 3px;
    display: inline-block;
    color: #000;
    font-family: sans-serif;
    font-weight: 600;
    transition: all .3s ease;

    position: relative;
    z-index: 1;
  }

  .nav a:hover,
  .nav a.active {
    background: #000;
    color: #fff;
  }

  .nav a::before {
    position: absolute;
    content: '';
    width: calc(100% - 20px);
    height: 3px;
    background: orange;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease;
  }

  .nav a.active::before,
  .nav a:hover::before {
    visibility: visible;
    opacity: 1;
  }
</style>


<div class="nav">
  <a href="#">item-1</a>
  <a href="#">item-2</a>
  <a href="#" class="active">item-3</a>
  <a href="#">item-4</a>
  <a href="#">item-5</a>
</div>

【讨论】：

【解决方案2】：

这是由引导类在导航栏元素上设置的默认填充引起的。您可以使用 Bootstrap classes 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>

输出：

【讨论】：

【解决方案3】：

实现这一点的一种方法是像这样覆盖导航栏的引导填充：

.navbar {
  padding: 0 !important;
}

【讨论】：