Question

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

这是navbar和他的小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;
    }
}

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

Answer 1

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

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

Answer 2

添加更具体的选择器，例如.navbar.navbar-light.bg-faded（尝试仅使用!important 作为最后的手段）：

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

以下代码段：

.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>

Answer 3

bootstrap中<a>标记的默认颜色为蓝色，您需要使用覆盖它！重要。我添加了下面的代码段。

.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>

Sass CSS - 更改Navbar-link颜色

3 个答案: