Bootstrap导航栏链接颜色不会更改 [英] Bootstrap navbar link color won't change

问题描述

我需要将我的导航栏链接更改为白色，并将它们跨越导航栏。我已经为此编写了代码，但我似乎无法弄清楚为什么/它会一直被忽略。导航栏的背景是一个图像，链接似乎变成了白色，而没有图像，那么有没有办法解决这个问题并将图像保存在背景中？

.navbar {background-image：url（images / navbarbgnew.png）; background-size：cover; margin：-30px 0 15px 0;}。navbar ul {display：flex; justify-content：space-around;}。navbar ul li a {color：#FFF; font-family：Helvetica，sans-serif; font-weight：600; font-size：14px;}

< nav class = navbar navbar-expand-md navbar-light bg-light mb-3> < button class =navbar-togglertype =buttondata-toggle =collapsedata-target =＃navbarSupportedContentaria-controls =navbarSupportedContentaria-expanded =falsearia-label =Toggle导航>< span class =navbar-toggler-icon>< / span>< / button> < div class =collapse navbar-collapseid =navbarSupportedContent> < ul class =nav navbar-nav> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =＃id =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded =false>书籍< / a> < div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink> < a class =dropdown-itemhref =＃> Branding Sutra< / a> < / DIV> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =＃id =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded =false> LEARNING LAB< / a> < div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink> < a class =dropdown-itemhref =＃>研讨会< / a> < a class =dropdown-itemhref =＃>类< / a> < a class =dropdown-itemhref =＃>音频下载< / a> < / DIV> < /锂> < li class =nav-item> < a class =nav-linkhref =＃> SERVICES< / a> < /锂> < / UL> < / div>< / nav>

解决方案

您的自定义CSS规则的特异性必须匹配或超过相应Bootstrap规则的特异性。

因此，在这种特殊情况下，您需要一个如下规则：

  .navbar-light .navbar-nav .nav-link {
 color：red; 
} 
  

点击下方的运行代码段按钮并展开至完整页面以验证它的工作原理：
$ b

 < link rel =stylesheethref =https ：//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.cssintegrity =sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXmcrossorigin =anonymous>< script src =https：/ /code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =anonymous>< / script>< script src = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.jsintegrity =sha384-ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Qcrossorigin =anonymous>< / script>< script src =https：//maxcdn.bootstrapcdn .com / bootstrap / 4.0.0 / js / bootstrap.min.jsintegrity =sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYlcrossorigin =anonymous>< / script> < style> .navbar-light .navbar-nav .nav-link {color：red;}< / style>< nav class =navbar navbar-expand-md navbar-light bg-light mb-3> ; < button class =navbar-togglertype =buttondata-toggle =collapsedata-target =＃navbarSupportedContentaria-controls =navbarSupportedContentaria-expanded =falsearia-label =Toggle导航>< span class =navbar-toggler-icon>< / span>< / button> < div class =collapse navbar-collapseid =navbarSupportedContent> < ul class =nav navbar-nav> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =＃id =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded =false>书籍< / a> < div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink> < a class =dropdown-itemhref =＃> Branding Sutra< / a> < / DIV> < /锂> < li class =nav-item dropdown> < a class =nav-link dropdown-togglehref =＃id =navbarDropdownMenuLinkdata-toggle =dropdownaria-haspopup =truearia-expanded =false> LEARNING LAB< / a> < div class =dropdown-menuaria-labelledby =navbarDropdownMenuLink> < a class =dropdown-itemhref =＃>研讨会< / a> < a class =dropdown-itemhref =＃>类< / a> < a class =dropdown-itemhref =＃>音频下载< / a> < / DIV> < /锂> < li class =nav-item> < a class =nav-linkhref =＃> SERVICES< / a> < /锂> < / UL> < / div>< / nav>  

CSS特异性：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

并且： CSS特异性计算器

I need to change my navbar links to white and space them out across the navbar. I have written code for this but I can't seem to figure out why/where it keeps getting overridden. The background of the navbar is an image and the links seem to change to white without the image in there, so is there a way to fix that and keep the image in the background?

Can anyone help me understand what I'm doing wrong?

.navbar {
  background-image: url("images/navbarbgnew.png");
  background-size: cover;
  margin: -30px 0 15px 0;
}

.navbar ul {
  display: flex;
  justify-content: space-around;
}

.navbar ul li a {
  color: #FFF;
  font-family: "Helvetica," sans-serif;
  font-weight: 600;
  font-size: 14px;
}

<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          BOOKS
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Branding Sutra</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          LEARNING LAB
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Workshops</a>
          <a class="dropdown-item" href="#">Classes</a>
          <a class="dropdown-item" href="#">Audio Downloads</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SERVICES</a>
      </li>
    </ul>
  </div>
</nav>

解决方案

Can anyone help me understand what I'm doing wrong?

The specificity of your custom css rule must either match or exceed the specificity of the corresponding Bootstrap rule.

So, in this particular case you need a rule that looks like this:

.navbar-light .navbar-nav .nav-link {
    color: red;
}

Click "run code snippet" button below and expand to full page to verify that it works:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
<style>
.navbar-light .navbar-nav .nav-link {
    color: red;
}
</style>

<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    BOOKS
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Branding Sutra</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    LEARNING LAB
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Workshops</a>
                    <a class="dropdown-item" href="#">Classes</a>
                    <a class="dropdown-item" href="#">Audio Downloads</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">SERVICES</a>
            </li>
        </ul>
    </div>
</nav>

More info about CSS specificity:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

And: CSS Specificity Calculator

这篇关于Bootstrap导航栏链接颜色不会更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！