Question

我希望更改导航栏文字的颜色，但我无法弄明白。我已经设法通过使用

来改变品牌颜色

.navbar .navbar-brand {
color: red;}

当我尝试使用

时

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

没有任何改变。

这是我正在使用的导航栏代码。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <a class="navbar-brand" href="#">Navbar</a>
   <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
               <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
   </div>
</nav>

Answer 1

.navbar .navbar-nav > li {
  color: red;
}

或

.navbar .navbar-nav > li > a { color: red; }

试试这个。

Answer 2

您需要将a添加到您的CSS中。

＆＃13;

.navbar .navbar-nav a {
  color: red;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <a class="navbar-brand" href="#">Navbar</a>
   <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
         <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
               <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
   </div>
</nav>

＆＃13;

您还可以查看Fiddle

Answer 3

你必须在bootstrap css之后加载你的css并使用你自己的类或id与组合bootstrap的类

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

到

  .navbar .navbar-nav.myclass {
    color: red;
}

如果这不起作用！在你的css中很重要，但我不建议你经常使用它，因为很难通过覆盖css！重要 例如

 .navbar .navbar-nav.myclass {
    color: red !important;
}

或

.navbar .navbar-nav{
        color: red !important;
    }

Bootstrap 4 Navbar颜色不会改变

3 个答案: