引导导航栏未自定义

Question

我似乎找不到我的代码中哪里出错了。导航栏应该出现在我的页面顶部，以蓝色/青蓝色和白色字体显示，但实际上却是一个正常的反向导航栏(黑白)。任何帮助都是非常感谢的！下面是我的导航栏的css代码：

.navbar-inverse {
background-color: #1A237E;
background-image: none;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #1A237E;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #1A237E;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a,
.navbar-inverse .navbar-nav .open .dropdown-menu {
    background-color: #303F9F;
    color:#eeeeee;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a:hover {
    color:#000000;
}

这是我的HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"    data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Ristorante Con Fusion</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.html">
                        <span class="glyphicon glyphicon-home"  aria-hidden="true"></span> Home
                    </a>
                </li>
                <li class="active">
                    <a href="aboutus.html">
                        <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> 
                        About
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                     role="button" aria-haspopup="true" aria-expanded="false">
                     Menu <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Appetizers</a></li>
                        <li><a href="#">Main Courses</a></li>
                        <li><a href="#">Desserts</a></li>
                        <li><a href="#">Drinks</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Specials</li>
                        <li><a href="#">Lunch Buffet</a></li>
                        <li><a href="#">Weekend Brunch</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav> 

谢谢!

Answer 1

我把你的超文本标记语言和CSS放到一个引导模板JSFiddle中。一切看起来都很好，导航栏显示为蓝色和白色文本。

确保在Bootstrap样式表之后加载自定义样式表，否则CSS将被覆盖。

​

​

Answer 2

非常感谢大家对我们的帮助！当我打开检查器时，我看到我的css文件没有完全显示出来，并在一个我不使用的类前面停了下来。我删除了css文件的这一部分，文件的其余部分出现在检查器中，包括导航栏。感谢你帮助一个新手！