问题出在 Bootstrap 4 中的修复导航菜单上。我缺少的东西导致了这个问题答案

【问题标题】：The issue is with the fix navigation menu in Bootstrap 4. Something I am missing which makes this issue问题出在 Bootstrap 4 中的修复导航菜单上。我缺少的东西导致了这个问题
【发布时间】：2018-01-22 19:52:06
【问题描述】：

我在使用 bootstrap 4 的固定导航时遇到了问题。对于未激活类的悬停导航项是可以的。但问题是当我将鼠标悬停在活动导航项上时，它会显示两个边框底部。我在这里需要帮助。谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
    <!-- bootstrap.min.css -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"> 
</head>

<body data-spy="scroll" data-target=".navbar">

<div class="container-fluid ">
    <nav class="navbar fixed-top mainNavigation navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Next World</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#homeNav" aria-controls="homeNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="homeNav">
            <ul class="navbar-nav mr-auto ">
            </ul>
            <ul class="navbar-nav">
                  <li class="nav-item active">
                  <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#about">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#team">Our Team</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#product">Our Product</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#services">Our Services</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact Us</a>
                  </li>
            </ul>
          </div>
    </nav>  
</div>  


<!-- other -->
<div id="home" style="height: 500px;">Home</div>
<div id="about" style="height: 500px;">About</div>
<div id="team" style="height: 500px;">Team</div>
<div id="product" style="height: 500px;">Product</div>
<div id="services" style="height: 500px;">Services</div>
<div id="contact" style="height: 500px;">contact</div>
    <!-- jquery link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- popper.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <!-- bootstrap.min.js -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

css如下所示

.mainNavigation{
    background-color: #fff !important;
    font-family: 'Handlee', cursive;
    font-size: 16px;
}
.nav-link{
    color: rgb(165, 29, 43) !important;
}
.navbar-nav .nav-item{
    padding-top: 1px;
    cursor: pointer;
    }
    .navbar-nav .nav-item{
        opacity: 0.5;
    }
    .navbar-nav .nav-item:hover {
        opacity: 1;
        border-bottom: solid 2px rgb(165, 29, 43);
        padding-top: 0px;
        border-radius: 1px;
        transition-delay: 0.2s;
    }
  .navbar-nav .nav-item .active {
        opacity: 1;
        border-bottom: solid 2px rgb(165, 29, 43);
        padding-top: 0px;
        border-radius: 1px;
        transition-delay: 0.2s;
    }

https://jsfiddle.net/de_pes08/k12vgu3q/

【问题讨论】：

如果你从.navbar-nav .nav-item .active中注释掉border-bottom: solid 2px rgb(165, 29, 43); ，那么只会显示一个底部边框。
如果您删除 .nav-item 和 .active 之间的空格，使其显示为 .navbar-nav .nav-item.active 这就是您要查找的内容吗？

标签： jquery html css twitter-bootstrap frontend

【解决方案1】：

您可以使用简单的 CSS 逻辑来解决这个问题。只需制作如下逻辑：如果我们将 .nav-item 表示的列表 (li) 悬停，则 .nav-link.active（.nav-link 和 .active）将不会显示额外的底部边框。

确切的 css 代码如下：

  .nav-item:hover a.nav-link.active {
    border: none;
}

注意：如果您在现场测试 css，那么您会看到 .active 列表元素的显示与其他元素一样稍有延迟。如果您不需要，只需从源 css 文件中删除转换延迟。

谢谢。

【讨论】：