Несколько цветных бутстрапов navbar

Question

Что я хочу сделать, это получить несколько цветов в навигаторе? В настоящее время в баре, как показано

1. Navbar
   
2. Logo
   
3. NavBar
   

Только я могу только показаться, чтобы получить один цвет
Вот ссылка на код, который у меня есть: http://jsfiddle.net/ju47nkgu/

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
<div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="/">Home</a> 
       </li> 
       <li> 
        <a href="/dealers">Dealers</a> 
       </li> 
       <li> 
        <a href="/about">About</a> 
       </li> 
       <li> 
        <a href="/contact">Contact</a> 
       </li> 
      </ul> 
     </div> 

    <br> 
    <div class="col-lg-5 col-xs-10 col-centered"> 
     <a href="/"> 
     <img class="img-responsive" src="http://i.imgur.com/FL53zwz.png"> 
     </a> 
    </div> 

    <div class="collapse navbar-collapse navbar-small yellow" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="/">Building/<br>Trade</a> 
       </li> 
       <li> 
        <a href="/">Bandsaws</a> 
       </li> 
       <li> 
        <a href="/">Automotive</a> 
       </li> 
       <li> 
        <a href="/">Dust/<br>Vacuums</a> 
       </li> 
       <li> 
        <a href="/">Planers/<br>Thicknessers</a> 
       </li> 
       <li> 
        <a href="/">Routers/<br>Morticers</a> 
       </li> 
       <li> 
        <a href="/">Sanders/<br>Grinders</a> 
       </li> 
       <li> 
        <a href="/">Table saws</a> 
       </li> 
       <li> 
        <a href="/">Woodlathes</a> 
       </li> 
       <li> 
        <a href="/">DIY</a> 
       </li> 
      </ul> 
     </div> 
</nav> 

А вот CSS

body{ 
    margin-top: 50px; 
} 

@media (min-width: 768px) { 
    .navbar .navbar-nav { 
     display: inline-block; 
     float: none; 
    } 

    .navbar .navbar-collapse { 
     text-align: center; 
    } 
}  


.divide-nav{ 
    height: 50px; 
    background-color: #428bca; 
} 

.divide-text{ 
    color:#fff; 
    line-height: 20px; 
    font-size:20px; 
    padding: 15px 0; 
} 

.affix { 
    top: 50px; 
    width:100%; 
} 

.filler{ 
    min-height: 2000px; 
} 

.navbar-form { 
    padding-left: 0; 
} 

.navbar-collapse{ 
    padding-left:0; 
} 
.col-centered{ 
    float: none; 
    margin: 0 auto; 
} 

Answer 1

Просто добавь правила CSS с нужным цветом фона.

В текущем случае добавьте правила ..

#bs-example-navbar-collapse-1 { background-color: lightgray; } 
#bs-example-navbar-collapse-1.yellow { background-color: yellow; } 

... и установить цвет фона, чтобы все, что вам нравится!