Bootstrap navbar dropdown style

Question

Как я могу изменить маркированные цвета панели управления на панели навигации? Я использовал navbar generator, но у него есть ошибка и не генерируются упомянутые коды css для желаемых цветов. Вот картинка:

Вот мой текущий CSS переопределяет:

.dropdown-menu { background-color: #3E968A} 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu > .active > a:hover { background-color: #42CBAD} 
.dropdown-menu>li>a { color: #EEF9FA} 
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #1D2C43} 
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #1D2C43} 
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret, .dropdown-menu > .active > a { border-top-color: #486972} 
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #1D2C43} 
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #486972} 
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EEF9FA} 

Answer 1

Это то, что это выглядит, как вы пытаетесь сделать, и если бы не это должно помочь вам применить стиль вы хотите navbar.

Вы также должны оформить этот пост>Change navbar color in Twitter Bootstrap 3 и эту ссылку (TWBSColor), на который ссылается в пост

См работает Snippet.

.navbar.navbar-inverse { 
 
    background-color: #3e968a; 
 
} 
 
.navbar.navbar-inverse .navbar-nav > li > a { 
 
    background-color: #3e968a; 
 
    color: #1d2c43; 
 
} 
 
.navbar.navbar-inverse .navbar-nav > li > a:hover { 
 
    color: #42cbad; 
 
} 
 
.navbar.navbar-inverse .navbar-nav > .active, 
 
.navbar.navbar-inverse .navbar-nav > .active > a, 
 
.navbar.navbar-inverse .navbar-nav > .active > a:hover, 
 
.navbar.navbar-inverse .navbar-nav > .active > a:focus { 
 
    background-color: #486972; 
 
    color: #eef9fa; 
 
} 
 
.navbar.navbar-inverse .dropdown-menu { 
 
    background-color: #3e968a; 
 
} 
 
.navbar.navbar-inverse .dropdown-menu > li > a { 
 
    color: #eef9fa; 
 
} 
 
.navbar.navbar-inverse .dropdown-menu > li > a:hover, 
 
.navbar.navbar-inverse .dropdown-menu>li>a:focus { 
 
    background-color: #42cbad; 
 
    color: #1d2c43; 
 
} 
 
.navbar.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle, 
 
.navbar.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle, 
 
.navbar.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle { 
 
    background: #486972; 
 
    color: #eef9fa; 
 
} 
 
.navbar.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { 
 
    border-bottom-color: #486972; 
 
} 
 
.navbar.navbar-inverse .navbar-brand { 
 
    color: #1d2c43; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">Brand</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 

 
     </li> 
 
     <li><a href="#">Link</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 

 
      </li> 
 
      <li><a href="#">Another action</a> 
 

 
      </li> 
 
      <li><a href="#">Something else here</a> 
 

 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 

 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a> 
 

 
      </li> 
 
      <li><a href="#">Another action</a> 
 

 
      </li> 
 
      <li><a href="#">Something else here</a> 
 

 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>