问题描述：

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

CODEPEN

header.html.erb

<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>标签在我的CSS，所以我加了这个问题，以及：

.navbar-brand2 a { 
    color: white; 
    font-weight: bold; 
}

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

嗨。将'！important'属性添加到您的样式中。这将覆盖所有以前的样式设置。例如'.navbar-brand2 a {color：white！important; font-weight：bold！important; }' –

答

用于改变默认的颜色

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

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

这很有效！谢谢你的帮助 – darkginger

谢谢@darkginger :) –

答

我会避免使用!important可能的情况下非常重要。而是尽量让你的选择更具体的

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

或者用量少：

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

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

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

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

CODEPEN

相关推荐