Question

如何更改导航栏的默认背景颜色？在我的HTML中我有这个代码，但页面没有渲染这个，它坚持默认的bootstrap css。这是我的实时测试页面http://andrewsamonas.com/，它显示默认的反向暗导航栏而不是我的导航栏自定义测试页面。我google了很多，这就是我发现使用navbar-custom

的方式

这是我添加到我的style.css中的内容：

.navbar-custom {
    background-color: #CC0000;
    border-color: #AA0000;
    border-radius: 0;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: #FFF;
}

.navbar-custom .navbar-nav > li > a {
    color: #FFF;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    background-color: #AA0000;
}

.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
    color: #FFF;
    background-color: #AA0000;
}

.navbar-custom .navbar-text {
    color: #FFF;
}

.navbar-custom .navbar-toggle {
    border-color: #AA0000;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: #AA0000;
}

.navbar-custom .navbar-toggle .icon-bar {
    background-color: #FFF;
}

 this is in the html head

<link rel="stylesheet" href="css/styles.css">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


this is the navbar part 
<div class="navbar navbar-inverse navbar-fixed-top"> 
  
<div class="container">
  
<div class="navbar-header">
<a href="#" class="navbar-brand">My Site</a>

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  </div>
  <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li>


        <li class="dropdown">

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>

        <ul class="dropdown-menu">
        <li><a href="#">Logout</a></li>
        <li><a href="#">Logout</a></li>
        <li><a href="#">Logout</a></li>                 

        </ul>


        </li>
      </ul>
    </div>

</div></div>


        <div id="push"></div>

Answer 1

您实际上并未在HTML中的任何位置应用navbar-custom类。使用类div将其添加到navbar上的班级列表的末尾。

<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">

Answer 2

更改

<div class="navbar navbar-inverse navbar-fixed-top">

要

<div class="navbar-custom navbar-fixed-top">

Answer 3

无需更改课程。只需要让你的选择器具有比现在更高的特异性＆＃34;支配＆＃34;之一：

.navbar.navbar-inverse {
background-color: #CC0000;
}

这将取代标准背景。

编辑：如果由于任何原因您更喜欢使用navbar-custom，您必须将此类添加到元素中，并且STILL会使您的选择器具有更高的特异性。 E.g：

.navbar.navbar-custom { }

如何更改导航栏的默认背景颜色？

3 个答案: