css - 添加 bootstrap nav-pills 背景颜色

Question

我有一个 Bootstrap 导航栏，其中单个元素是 nav-pills。我重新编译了 bootstrap 以更改默认颜色。现在我想为不同于悬停和事件药丸的药丸添加背景颜色。怎么做？我应该通过应用程序范围的 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 default less 配置中没有选项。

那么为什么不设置:

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

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

您还可以创建一个bootstrap_extended.less 文件并放入

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

在顶部，因此您只需使用/编译您的文件并创建一个最终的且已经扩展的单个 css 用于 Bootstrap 。