添加bootstrap的nav-pills背景颜色

Question

我有一个引导导航栏，单个元素为nav-pills。我重新编译bootstrap以更改默认颜色。现在我想为不同于悬停和活动的药丸添加背景颜色。怎么做？我应该通过app-wide css文件强制它吗？有没有办法通过bootstrap的 less 来实现它？

这是我当前导航栏的片段：

<nav class="navbar">
  <div class="container">

    <div class="collapse navbar-collapse elements">
      <ul class="nav nav-pills navbar-right">
        <li ng-class="setClass('/')"><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
        <li ng-class="setClass('/list')"><a href="/list">Browse</a></li>
        <li ng-class="setClass('/search')"><a href="/search">Search</a></li>
      </ul>
    </div>
  </div>
</nav>

正如你所看到的，悬停的元素得到了一个很好的突出显示，活跃的元素清晰可见，而不活跃的元素在背景中丢失了。

Answer 1

由于默认nav-pills没有默认背景颜色，您需要自己设置一个。 bootstraps默认配置中没有选项。

那么为什么不设置：

.nav-pills > li > a {
    background: #f6f6f6;  /* your preferred color */
}

我会把它放在另一个css文件中 - 不是在bootstraps css或更少的文件中。因为一旦你想要更新引导程序，你总是可以使用配置json快速完成，但你必须记住并再次设置所有css / less更改 - 否则它们将丢失。
为了更好地构建文件，您可以创建一个 bootstrap_extended.css 文件（或类似的东西），在这里您只需放入代码扩展或覆盖自定义页面上无法配置的引导程序默认值。

您还可以创建 bootstrap_extended。 less 文件并放入

@import (inline) '../Content/bootstrap.less';

在顶部，所以你只需要使用/编译你的文件，并为bootstrap创建一个最终的，已经扩展的单个css。