如何将导航栏的背景颜色更改为不同的颜色答案

【问题标题】：how to change background-color of the navigation-bar into different colours如何将导航栏的背景颜色更改为不同的颜色
【发布时间】：2017-01-12 12:27:54
【问题描述】：

如何更改每个 home-project-etc 的背景颜色？

我已经能够改变第一个家庭导航，但似乎无法弄清楚如何改变其余的我认为这与第一个孩子，第二个孩子等有关，只学习了几个月，任何帮助会很棒。

【问题讨论】：

欢迎来到 StackOverflow。请阅读本文并改进您的问题。 stackoverflow.com/help/mcve
getbootstrap.com/examples/justified-nav 这就是我的工作
@JayClarke - 我敢肯定我们不明白你的问题。好吧，我不知道你在问什么。也许向我们展示您的一些代码？也许尝试更详细地描述您的问题...

标签： html css twitter-bootstrap-3 navigation

【解决方案1】：

首先你创建一个类： .nav-justified > li > a{ background-image: none; }

然后为您的每个家庭....项目等选项卡创建一个独特的类，然后将您的背景颜色传递到那里并将背景图像设置为无。

.nav-justified > li.project-tab > a{
  background-color: #1da1f2;
  background-image: none;
  }

<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
          <ul class="nav nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li class="project-tab"><a href="#">Projects</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Downloads</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>

【讨论】：