添加引导导航药丸背景颜色答案

【问题标题】：Add bootstrap's nav-pills background color添加引导导航药丸背景颜色
【发布时间】：2019-03-03 15:51:01
【问题描述】：

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

这是我当前导航栏的 sn-p：

<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>

如您所见，悬停的元素得到了很好的突出显示，活动元素清晰可见，而非活动元素则在背景中消失了。

【问题讨论】：

你的代码在哪里？
你想看什么？
我想看看你的尝试。不是你的输出吗？然后给代码。
您可以使用自定义工具随意修改颜色（getbootstrap.com/customize） - 当然您也可以修改LESS文件并重新生成CSS文件（这是自定义工具所做的给你）
这是我的输出。这里没什么特别的，只是简单的引导。顺便说一句，并不是真正的代码问题。更多的是一个哲学问题，即我应该在哪里强制导航药丸的背景？在我的应用程序范围的 css 文件中，在重新编译的引导 css 中，或者有一种方法可以通过 less 来实现它。无论如何，我正在编辑以包含导航栏的 html 代码。

标签： css angularjs twitter-bootstrap

【解决方案1】：

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

那么为什么不只是设置：

.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';

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

【讨论】：