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

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

这是我在天气站点中用于覆盖导航栏的方法

Answer 2

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

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