如何更改导航颜色？

我有这样我的第一个导航栏：如何更改导航颜色？

<nav role="navigation" class="nav navbar-default"> 
 
    <div class="navbar-header"> 
 
    <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href=#>Log In</a></li> 
 
     <li><a href=#>Sign Up</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

当我将此CSS：

.collapse ul li { 
    color: #ffffff; 
}

是不是应该改变颜色li？

它仍然是平时的颜色。为什么是这样？

来源

2016-09-14 Aravind Suresh

'''.collapse UL立一个{颜色：#FFFFFF; }''这会改变文本的颜色，比如Login。 – aavrug

@aavrug它不会。它没有。它永远不会... –

为什么？看，我已经在下面发布了一个答案。如果这不适合你，那么肯定有其他一些样式凌驾于你的造型上。 – aavrug

你只需要调整您的选择

.collapse ul.navbar-nav>li>a { 
 
    color: red; 
 
} 
 

 
.collapse ul.navbar-nav>li { 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav role="navigation" class="nav navbar-default"> 
 
      <div class="navbar-header"> 
 
       <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
      </div> 
 
      <div class="collapse navbar-collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href=#>Log In</a></li> 
 
        <li><a href=#>Sign Up</a></li> 
 
       </ul> 
 
      </div> 
 
</nav>

来源

2016-09-14 06:44:21 Tushar

IT WORKED !!!!!!!!非常感谢.... –

乐意帮忙;） – Tushar

有一个在引导主题CSS

background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%)

这是防止你的背景颜色应用预定义的背景图像属性。

所以，.navbar.navbar-default.

来源

2016-09-14 06:38:45

仍然不起作用..... –

哦，好吧，我读了编辑。但现在我得到一个白色的大背景，我想要改变颜色，而不是背景。 –

现在appy你想要的颜色 –

尝试a标签变色添加background-image:none;到

.collapse ul li a { 
    color: #ffffff; 
}

来源

2016-09-14 06:43:04

不...... no：它仍然有最初的颜色 –

只是为了改变颜色。如果你想要一些其他的改变，你可以设计它。

.collapse ul li a { 
 
    color: red; 
 
}

<nav role="navigation" class="nav navbar-default"> 
 
    <div class="navbar-header"> 
 
    <button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href=#>Log In</a></li> 
 
     <li><a href=#>Sign Up</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

来源

2016-09-14 08:39:39 aavrug

你是否把这个文件连接到bootstrap？你没有，这就是为什么它适合你而不是我。 –

我不假设将它与bootstrap连接起来。我刚刚给你提出了你问的问题的解决方案，并且没有引导的情况下只有这么多的代码，并且记住如果你想要设计任何元素的样式并且它不适用，那么这意味着你写了更多的特定标签，代表你的标签。 :) – aavrug

'我的问题？'你读过标签吗？我的意思是，你能不能让这是bootstrap？ '.classes'和所有 –

如何更改导航颜色？

回答

相关问题