Sass CSS - 更改Navbar-link颜色

I want to change the color of my navbar on Bootstrap 4 but It doesn't work, I don't understand why. I tried many things, but nothing

我想在Bootstrap 4上更改导航栏的颜色，但它不起作用，我不明白为什么。我尝试了很多东西，但没有

Here is the navbar with his little CSS

这是带有小CSS的导航栏

<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
      <a class="nav-item nav-link active" href="#">HearthBreak <span     class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

.navbar{
    background-color: #252830;
    .nav-item, .nav-link{
        color: #FFF;
    }
}

Normally I can change the NavItem but I don't understand which child I need to change.

通常我可以更改NavItem，但我不明白我需要更改哪个孩子。

3 个解决方案

#1

If you are trying to change the background-color of navbar, you may have to override "background-image" property as:

如果您尝试更改导航栏的背景颜色，则可能必须覆盖“background-image”属性，如下所示：

nav.navbar{
    background-color: red;
    background-image:none;
    .nav-item, .nav-link{
        color: #FFF;
    }
}

#2

Add a more specific selector like .navbar.navbar-light.bg-faded (try to use !important only as last resort):

添加一个更具体的选择器，如.navbar.navbar-light.bg-faded（尝试使用！仅作为最后的重要）：

.navbar.navbar-light.bg-faded{
        background-color: #252830;
        .nav.navbar-nav>a.nav-item.nav-link {
            color: #fff;
        }
    }

Snippet below:

下面的代码段：

.navbar.navbar-light.bg-faded {
  background-color: #252830;
}
.nav.navbar-nav>a.nav-item.nav-link {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
    <a class="nav-item nav-link active" href="#">HearthBreak <span     class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

#3

the default color for <a> tag in bootstrap is blue,you need to override that by using ! important.I'm added the snippet below.

bootstrap中标签的默认颜色为蓝色，您需要通过使用来覆盖它！很重要。我添加了下面的代码片段。

.navbar{
    background-color: #252830;
    
}
.nav-item, .nav-link{
        color: #FFF ! important;
    }

<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
      <a class="nav-item nav-link active" href="#">HearthBreak <span     class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

#1