html - 无法从 Bootstrap 菜单中删除黑条以显示我的菜单更改

Question

我一辈子都弄不明白为什么我拥有的嵌入式 css 没有覆盖默认设置为 Twitter Bootstrap 的菜单选项。下面是我想要的菜单:

下面是我现在的图像。如您所见，菜单底部有一些蓝色。我尝试了一大堆 css，唯一稍微起作用的是内联样式，但它只做了一些菜单。

这是我的内部样式表

.navbar-default {
    background-color: #0080c0;
    border-color: #80ffff;
}
.navbar-default .navbar-brand {
    color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #000000;
}
.navbar-default .navbar-text {
    color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000000;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #000000;
    background-color: #80ffff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #000000;
    background-color: #80ffff;
}
.navbar-default .navbar-toggle {
    border-color: #80ffff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #80ffff;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ecf0f1;
}
.navbar-default .navbar-link {
    color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
    color: #000000;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ecf0f1;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #000000;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #000000;
        background-color: #80ffff;
    }
}

这是我的菜单代码

<div class="navbar navbar-default navbar-inverse navbar-fixed-top navbar-custom" >
         <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div  class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li {{ (Request::is('/') ? ' class="active"' : '') }}><a href="{{{ URL::to('') }}}">Home</a></li>
                </ul>

                <ul class="nav navbar-nav pull-right">
                    @if (Auth::check())
                    @if (Auth::user()->hasRole('admin'))
                    <li><a href="{{{ URL::to('admin') }}}">Admin Panel</a></li>
                    @endif
                    @if(Auth::user()->isRegistered())
                    <li><a href="{{{ URL::to('registered') }}}">Registered</a></li>
                    @endif
                    <li><a href="{{{ URL::to('user') }}}">Logged in as {{{ Auth::user()->username }}}</a></li>
                    <li><a href="{{{ URL::to('user/logout') }}}">Logout</a></li>
                    @else
                    <li {{ (Request::is('user/login') ? ' class="active"' : '') }}><a href="{{{ URL::to('user/login') }}}">Login</a></li>
                    <li {{ (Request::is('user/create') ? ' class="active"' : '') }}><a href="{{{ URL::to('user/create') }}}">{{{ Lang::get('site.sign_up') }}}</a></li>
                    @endif
                </ul>
                <!-- ./ nav-collapse -->
            </div>
        </div>
    </div>

如果你往底部读，谢谢你的帮助。我很感激!

Answer 1

你必须使用 !important 来覆盖 css

例如

.navbar-default {
    background-color: #0080c0 !important;
    border-color: #80ffff !important;
}

但是在修改基础( Bootstrap )css 时必须小心，因为这会反射(reflect)在您使用该类的所有地方

相反，您可以创建一个自定义类并将其添加到您的 html

.navBarBG{
 background-color: #0080c0 !important;
        border-color: #80ffff !important;
}

使用此方法，您可以覆盖您的基础 css 而无需修改它。