html - 多色 Bootstrap 导航栏

Question

我想做的是在导航栏中获得多种颜色？当前栏如图所示

1. 导航栏
   
2. 标志
   
3. 导航栏
   

除了我似乎只能得到一种颜色
这是我目前拥有的代码的链接: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; }

...并将背景颜色设置为您喜欢的任何颜色!