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

我将HTML和CSS放入Bootstrap Template JSFiddle中。一切似乎都很好，导航栏显示为蓝色，带有白色文字。

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

Answer 2

非常感谢你们的帮助！当我打开检查员时，我看到我的css文件没有完全显示并在我没有使用的课程之前停止。我删除了我的css文件的那一部分，文件的其余部分出现在检查器中，包括导航栏。谢谢你帮助一个新手！

Bootstrap Navbar无法自定义

2 个答案: