Question

我正在尝试为我的引导程序导航栏上的活动链接添加背景颜色，该链接看起来类似于下图所示。我已选择nav-link激活并在css中将其设为红色但我没有成功。

    <nav class="navbar navbar-expand-md navbar-custom">
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="Index.html">HOME <span class="sr-only">(current)</span></a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="https://shop.spartansafety.co.uk/personal-protection-s/1820.htm">PPE</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="https://shop.spartansafety.co.uk/default.asp">CLOTHING</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="https://shop.spartansafety.co.uk/category-s/1899.htm">FOOTWEAR</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="Contact.html">CONTACT</a>
            </li>


            <li class="nav-item">
                <a class="nav-link active" href="Contact.html">LOGIN</a>
            </li>
        </ul>
    </div>
</nav>




.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #cccccc;

}

.nav-link active {
color: red

}

Answer 1

您必须在.之前使用active：

.nav-link.active {
background-color: red
}

.nav-link.active {
background-color: red}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm navbar-custom">
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="Index.html">HOME <span class="sr-only">(current)</span></a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="https://shop.spartansafety.co.uk/personal-protection-s/1820.htm">PPE</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="https://shop.spartansafety.co.uk/default.asp">CLOTHING</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="https://shop.spartansafety.co.uk/category-s/1899.htm">FOOTWEAR</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="Contact.html">CONTACT</a>
            </li>


            <li class="nav-item">
                <a class="nav-link active" href="Contact.html">LOGIN</a>
            </li>
        </ul>
    </div>
</nav>

Answer 2

你在active类之前忘了一个点，你也需要摆脱它之前的空格，因为这两个类都在同一个元素中。所以你不需要它们之间的空间。试试这段代码。

.nav-link.active {
    color: red
}

在我的bootstrap导航栏上的活动链接中添加背景颜色

2 个答案: