覆盖Bootstrap以更改导航栏链接的颜色

Question

我很困惑为什么我无法在使用Bootstrap 3的Rails应用程序中的导航栏中更改字体的color属性。我目前有一个名为{{1的类设置这是成功修改其他链接属性（如创建边框），但我无法更改颜色本身。

escape < and >

header.html.erb

navbar-brand2

部分CSS

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
         <a class="navbar-brand" href="#">Home Page</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right">
          <li class="whatever"><a class="navbar-brand2" href="#">Contact</a></li>
          <li class="whatever"><a class="navbar-brand2" href="#">About Us</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav> 

我尝试过的其他事情

我想也许我需要直接引用我的CSS中的.navbar-brand2 { font-family: 'Londrina Solid', cursive; color: white; font-size: 1.6em; letter-spacing: 1.5px; padding-left: 13px; padding-right: 13px; margin-top: 12px; border: white 2px solid; border-radius: 12px; margin-right: 10px; } .navbar-brand2 a { color: #F5F5F5; ; } .navbar-brand2:hover { color: #E4491C; border-color: #E4491C; text-decoration: none; } 标记，所以我也添加了这个：

<a>

同样的问题。我没有在文档或其他答案中看到任何内容：我是否需要做一些特殊的事情来覆盖默认颜色（这意味着我的策略通过定义一个类永远不会对这个特定属性起作用）？

Answer 1

使用重要来更改默认颜色

.navbar-brand2 {
    color: white !important;
}

http://codepen.io/nagasai/pen/vKjgwZ

Answer 2

我会尽可能避免使用!important。而是尝试使您的选择器更具体

.nav.navbar-nav .navbar-brand2 {
    color: white;
}

或少用：

.nav {
    &.navbar-nav {
        .navbar-brand2 {
            color: white;
        }
    }
} 

我在这里有一个样板文件，用于创建易于维护的bootstrap主题。查看自述文件中的说明。

https://github.com/patrickleet/bootstrap-override-boilerplate