我将在我的bootstrap navbar-inverse中改变颜色和另一个css。默认颜色为黑色,我想以深蓝色更改它。 我想,我的代码是正确的,但不幸的是,没有任何改变。
.navbar {
font-size: 16px;
font-weight: 100;
}
li {
margin: 5px 0px 5px 0px;
font-size: 14px;
font-weight: 300;
}
.menu {
padding: 0px;
}
.navbar {
border-radius: 0px;
margin-bottom: 0px;
}
.navbar-inverse {
background-color: #1b365b;
border: none;
}
.navbar-brand {
padding: 5px 15px;
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
background-color: #254a7c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar-001 navbar navbar-inverse">
<div class="container menu-001">
<div class="row">
<div class="col-xs-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">О компании</a></li>
<li><a href="#">Прайс</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Услуги <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Грузоперевозки</a></li>
<li><a href="#">Аренда автотранспорта</a></li>
<li><a href="#">Аренда спецтехники</a></li>
<li><a href="#">Ремонт автотранспорта</a></li>
<li><a href="#">Грузовой шиномонтаж</a></li>
<li><a href="#">Вывоз мусора</a></li>
<li><a href="#">Продажа топлива</a></li>
<li><a href="#">Аренда земли</a></li>
<li><a href="#">Страхование грузов</a></li>
</ul>
</li>
<li><a href="#">Документы</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
&#13;
bootstrap html代码工作正常,但navbar css代码根本不起作用。但!与navbar-inverse无关的css代码完美无缺。
我的错误在哪里?我错了什么?
答案 0 :(得分:2)
.navbar-inverse {
background-color:#9933ff !important;
border:none;
}
你可以为navbar-inverse编写另一个css类并编写background-color并输入“!important”,因为它将覆盖bootstrap中的默认navbar-inverse
答案 1 :(得分:0)
试试此代码 bootstrap类与您的代码冲突
.navbar-001.navbar.navbar-inverse {
background-color:#1b365b;
border:none;
}
或强>
.navbar-001.navbar.navbar-inverse {
background-color:#1b365b!important;
border:none!important;
}