Html 多色引导导航栏

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

导航栏

徽标

导航栏

除了我似乎只能得到一种颜色
以下是我目前拥有的代码的链接：

---

只需添加具有所需背景颜色的CSS规则

在您当前的情况下，添加规则

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

---

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

我觉得这个解释不对。难道你不想让黄色类添加黄色背景吗？

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;
}

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