如何更改導航顏色？

我有這樣我的第一個導航欄：如何更改導航顏色？

<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'和所有 –

如何更改導航顏色？

回答

相關問題