1

我有一个简单的导航栏固定在我的页面顶部，可以在这里看到，但我一生都无法弄清楚如何更改背景颜色。我尝试在 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 -->
4

2 回答 2

2

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

于 2013-01-23T03:58:18.190 回答
0

如果您使用的是 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

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

于 2014-12-19T06:09:32.963 回答