Question

我一直在尝试更改导航栏上的背景颜色等。找到了其他地方的例子 Change navbar color in Twitter Bootstrap 3 所以我复制了它并改变了颜色，我的css看起来像这样：

.navbar-actions {
    background-color:#0099cc;
    color:#ff6600;
    border-radius:0;
}

.navbar-actions .navbar-nav > li > a {
    color:#ff6600;
}
.navbar-actions .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ff6600;
    background-color:transparent;
}
.navbar-actions .navbar-brand {
    color:#ff6600;
}

我的代码工作正常如果我使用navbar-default它正确折叠并显示按钮以展开。当我切换到导航栏操作时，导航器没有颜色，当它折叠时没有展开按钮。这是我的导航器的代码：

<nav class='navbar navbar-actions'>
                    <div class="container-fluid">
                        <div class='navbar-header'>
                            <button type='button' class='navbar-toggle' data-toggle='collapse'
                                data-target='#viewNavbar'>
                                <span class='icon-bar'></span>
                                <span class='icon-bar'></span>
                                <span class='icon-bar'></span>
                            </button>
                            <div class='hidden-sm hidden-md hidden-lg'>
                                <a class="navbar-brand">Actions</a>
                            </div>
                        </div><!-- navbar-header -->
                        <div class='collapse navbar-collapse' id='viewNavbar'>
                            <ul class="nav nav-pills">
                                <li role="presentation">
                                    Action One
                                </li>
                                <li role='presentation'>
                                    Action Two
                                </li>
                                <li role='presentation'>
                                    Action Three
                                </li>
                            </ul>
                        </div><!-- collapse -->
                    </div><!-- container -->

                </nav>

我真的进入了Bootstrap格式，所以任何帮助都会受到赞赏。

Answer 1

在这种情况下简单地覆盖.navbar-default类是否有任何问题？

（而不是使用导航栏操作）

Answer 2

.navbar-weather {
    background-color: #336699; 
    color:#eee; 
    border-radius:0;
}

.navbar-weather .navbar-nav > li > a {
    color:#dcdcdc; 
    padding-left:20px;
    padding-right:20px;
}

.navbar-weather .navbar-nav > .active > a, .navbar-nav > .active >      a:hover, .navbar-nav > .active > a:focus {
    color: #B0C4DE; 
    background-color: transparent;
}

.navbar-weather .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    color: #000; 
    background-color: #B0C4DE; 
}

.navbar-weather .navbar-brand {
    color :#eee; 
}

.navbar-weather .navbar-toggle {
    color: #eee 
    background-color: transparent; 
}

.navbar-weather .icon-bar {
    background-color: #dcdcdc; 
}

这是我用来覆盖我的耐候性的导航栏

更改BootStrap导航栏上的默认设置

2 个答案: