无法使用 Bootstrap 或 CSS 更改 nav-pills 背景颜色答案

【问题标题】：Can't change the nav-pills background color using Bootstrap or CSS无法使用 Bootstrap 或 CSS 更改 nav-pills 背景颜色
【发布时间】：2014-12-19 14:09:32
【问题描述】：

我有一个简单的导航栏固定在我的页面顶部，可以看到here，但我一生都无法弄清楚如何更改背景颜色。我尝试在 Bootstrap CSS 文件中编辑 a:hover 代码，并使用各种不同的类调用在我自己的自定义 CSS 文件中覆盖它，但仍然没有运气。有人可以帮帮我吗？我知道这一定很简单，我只是被难住了。

这是我的导航栏 HTML 代码：

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">Homegrown</a>
            <div class="nav-collapse">
                <ul class="nav nav-pills pull-right">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="index.html">About</a></li>
                    <li><a href="index.html">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
            </div><!-- /.container -->
        </div><!-- /.navbar-inner -->
    </div><!-- /.navbar -->

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

导航栏背景的样式为.navbar-inner。找出什么元素具有什么风格的一种简单方法是使用调试工具，例如 chromes 检查器（在视图 > 开发人员 > 开发人员工具下）或 firebug for firefox (http://getfirebug.com/)

【讨论】：

知道为什么 'a:active' 的工作方式与 'a:hover' 不同吗？
对不起，我误读了您的问题，请注意 li 有一个名为 active 的类，您需要更改它以更改背景颜色：.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus
感谢您的帮助，它最终是： .navbar .nav > .active a, .navbar .nav > .active a:hover, .navbar .nav > li a:hover {}

【解决方案2】：

如果您使用的是 Sass 或 Less，您可以从 _navs.scss 自定义这些变量：

//== Pills
$nav-pills-border-radius:                   $border-radius-base !default;
$nav-pills-active-link-hover-bg:            $component-active-bg !default;
$nav-pills-active-link-hover-color:         $component-active-color !default;

可以找到对应的less值和文件。

这是文档：http://getbootstrap.com/customize/#navbar

但是，对于这种自定义，来源更容易理解。

【讨论】：