更改 Bootstrap Navbar 3.4.1 的字體顏色

Question

嗨，我想更改引導導航欄鏈接的字體顏色，並且已經嘗試將特定的 class 設置為導航欄，就像在與此類似的其他帖子中建議的那樣。 但是，我只設法更改了導航欄品牌的字體。 你能給點建議嗎？ 我的特異性有問題嗎？

 header{ margin-top: 1em; }.navbar-main{ background-color: #00cc99; }.navbar.navbar-www{ color: white; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <nav class="navbar navbar-default navbar-main"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a> </div> <ul class="nav navbar-nav navbar-www"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"></ul> </div> </nav>

我仍然是編碼和嘗試避免的絕對初學者。重要並且仍在學習特異性。 謝謝！

Answer 1

 header{ margin-top: 1em; }.navbar-main{ background-color: #00cc99; }.navbar-www li a{ color: white;important;

 <header> <nav class="navbar navbar-default navbar-main"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a> </div> <ul class="nav navbar-nav navbar-www"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"></ul> </div> </nav> </header>

Answer 2

盡量避免.important，因為這是一個壞習慣。 您可以通過向導航欄添加一些額外的類或可以是任何 ID 來覆蓋引導程序 CSS。

這是更改導航鏈接文本顏色的方法

.navbar-www.navbar-brand li a{
color:#fff;
}

如果這沒有覆蓋，請嘗試在導航欄中添加一些 id 並使您的 css 代碼類似於這樣。

#navbar.navbar-www.navbar-brand li a{
color:#fff;
}

您可以輕松地在控制台中查看導航鏈接引導程序的樣式。 您可以通過添加一個額外的選擇器來覆蓋它，它可以是 class、屬性、id 或任何父選擇器。

Answer 3

您需要為鏈接添加顏色，請將.navbar.navbar-www替換為.navbar.navbar-www請在下方查看

 header{ margin-top: 1em; }.navbar-main{ background-color: #00cc99; }.navbar.navbar-www a{ color: white; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <nav class="navbar navbar-default navbar-main"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand navbar-www">Kau Unlimited</a> </div> <ul class="nav navbar-nav navbar-www"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> <ul class="nav navbar-nav navbar-right"></ul> </div> </nav>