我正在尝试为我的引导程序导航栏上的活动链接添加背景颜色,该链接看起来类似于下图所示。我已选择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
}
答案 0 :(得分:2)
您必须在.
之前使用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>
答案 1 :(得分:0)
你在active
类之前忘了一个点,你也需要摆脱它之前的空格,因为这两个类都在同一个元素中。所以你不需要它们之间的空间。试试这段代码。
.nav-link.active {
color: red
}