Bootstrap 3，将 li.active 更改为 nav

Question

所以，我在玩 Bootstrap，我是个菜鸟。无论如何，要更改导航品牌，我必须使用：

.navbar-brand {
   color: #da212f!important;
   text-shadow: 2px 2px 2px #DDD;
}

也就是说，我必须使用 !important 声明来更改文本颜色。有没有办法解决这个问题（我只是好奇）。

问题是，我正在尝试更改导航栏中 li.active 的背景颜色和字体颜色。

这是 HTML

<!-- Start Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">Mr. Robot</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="computers.html">Hardware</a></li>
        <li><a href="robots.html">Robots</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

对于我的生活，我无法更改背景颜色，我也想知道如何更改字体颜色。

这是我尝试过的 CSS 选项：

选项 1

li.active {
   background-color: #da212f!important;
   color: #fff!important;
}

选项 2

.navbar-nav > li.active {
       background-color: #da212f!important;
       color: #fff!important;
    }

我都试过了，有没有 !important 声明。因此，如果有人可以帮助我并为我指明正确的方向，我将不胜感激。

Answer 1

对于徽标品牌，您可以在 navbar-brand 元素中添加一个 id，这将赋予它更高的 css specificity。

#myBrand {
  color: #da212f;
  text-shadow: 2px 2px 2px #DDD;
}

对于活动链接，您使用以下内容

.nav.navbar-nav > li.active a{
  background: none;     
  background-color: #da212f;
  color: #fff;
}

#myBrand {
  color: #da212f;
  text-shadow: 2px 2px 2px #DDD;
}

.nav.navbar-nav > li.active a{
  background: none;     
  background-color: #da212f;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a id="myBrand" class="navbar-brand" href="index.html">Mr. Robot</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Hardware</a></li>
        <li><a href="#">Robots</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 2

试试这个

.navbar-header > .navbar-brand {
   color: #da212f;
   text-shadow: 2px 2px 2px #DDD;
}

因为有一个 class="navbar-header" 的 div，然后在该 div 中，您可以找到一个带有 calss = "navbar-brand" 的锚标签，在那里您已将品牌塑造为“机器人先生”。

对于活动的 li 标签：

.nav.navbar-nav > li.active a{   
  background-color: #da212f;
  color: #fff;
}

添加截图供您参考。

Answer 3

要达到预期的效果，请在下面使用CSS

.navbar-default .navbar-nav>.active>a:active{
   background-color: #da212f;
   color: #fff;
}

.navbar-brand {
  color: #da212f!important;
  text-shadow: 2px 2px 2px #DDD;
}

.navbar-default .navbar-nav>.active>a:active {
  background-color: #da212f;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Start Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Mr. Robot</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Hardware</a></li>
        <li><a href="robots.html">Robots</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>