Question

我有一个简单的导航栏固定在我的页面顶部，可以看到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 -->

Answer 1

导航栏背景的样式位于.navbar-inner下。找出哪种元素具有什么样式的简单方法是使用调试工具，如chromes inspector（在视图＆gt;开发人员＆gt;开发人员工具下）或firebug for firefox（http://getfirebug.com/）

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

您可以找到相应的较小值和文件。

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

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

无法使用Bootstrap或CSS更改导航丸背景颜色

2 个答案: