導航欄品牌不會改變引導程序 4 中的顏色
[英]navbar-brand is not changing the color in bootstrap 4
問題描述
我正在嘗試使用 Bootstrap 4 更改navbar-brand類的顏色，但不知何故它不會改變。 我試圖閱讀文檔，但仍然找不到它不起作用的原因。 我添加了一個導航欄自定義類來定位導航欄帶類。
我的代碼：
@import url('https://fonts.googleapis.com/css?family=Roboto'); * { font-family: 'Roboto', sans-serif; } .navbar-custom { background-color: #ff5a5f; } /* change the brand and text color */ .navbar-custom .navbar-brand { color: white; font-size: 25px; } /* change the link color */ .navbar-custom .navbar-nav .nav-link { color: white; } <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <title>iGloo</title> <script src="https://use.fontawesome.com/bf64aa8e30.js"></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-custom"> <a class="navbar-brand" href="#">iGloo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> </header> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <img src="https://cdn.homedit.com/wp-content/uploads/2011/10/room-for-teens-girl-orange-picture.jpg" , class="img-fluid" alt="Room Image"></img> </div> </div><br> <div class="row"> <div class="col-md-6 title"> <h2>A House in the Middle of South Avenues.</h2> </div> <div class="col-md-6"> <h5>Ahmed Fahad</h5> </div> </div><br> <hr> <div class="row"> <div class="row"> <div class="col-md-3"> <i class="fa fa-bed fa-2x" aria-hidden="true"><p>Bedrooms 3 </p></i> </div> <div class="col-md-3"> <i class="fa fa-bath fa-2x" aria-hidden="true"><p> Bathrooms 3 </p></i> </div> <div class="col-md-3"> <i class="fa fa-user-circle-o fa-2x" aria-hidden="true"><p>People 6</p></i> </div> <div class="col-md-3"> <i class="fa fa-home fa-2x" aria-hidden="true"><p>Entire House</p></i> </div> </div> </div> <hr> <div class="row"> <div class="col-md-9"> <h3>About this House</h3> <p>A wonderful house in the middle of South Avenues. It's good for a fmaily who are looking for a holiday in South Avenues. It has alot of windows and the sun light is perfect in the house.</p> </div> </div><br> <hr> <div class="row"> <h3>Amenities</h3> </div> <div class="row"> <div class="row"> <div class="col-md-3"> <i class="fa fa-wifi fa-2x" aria-hidden="true"><p>Wifi</p></i> </div> <div class="col-md-3"> <i class="fa fa-television fa-2x" aria-hidden="true"><p>TV</p></i> </div> <div class="col-md-3"> <i class="fa fa-bed fa-2x" aria-hidden="true"><p>6 Beds</p></i> </div> </div> </div> <hr> </body> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </html>
9 個解決方案
解決方案1
2 2020-03-27 09:43:58
.navbar-brand{ color:red !important; }
試試這個。
解決方案2
1 2017-10-22 21:35:21
試試這個
.navbar-default .navbar-brand{ your snippet here }
解決方案3
1 已采納 2017-10-22 21:44:10
我的問題仍然存在我認為應該在調用 bootstrap.min.css 后調用您的自定義 css
解決方案4
1 2019-06-28 14:54:51
我使用 asp.net core 2.2，剛剛從 Bootstrap 3.3.7 更新到 4.3.1，現在嘗試讓我的布局再次工作......我也有這個問題（以及其他各種...... :-)
在我的情況下，導航欄品牌默認應該是灰色的，如果被懸停，則更改為白色。 更新后，它總是顯示為白色（胡佛不起作用）。 在 bootstrap.css 中顯式設置顏色不起作用。 在我的情況下，唯一（不好）的解決方法是在創建導航欄之前使用!important設置樣式（在我的情況下，在 _Layout.cshtml 中，因為我使用 asp.net core 2.2）。
<style type="text/css">
.navbar-brand {
color: #9d9d9d !important;
}
.navbar-brand:hover, .navbar-brand:focus {
color: #fff !important;
}
現在似乎在我的情況下有效......
注意：
如果放置了樣式，則在創建導航欄后，樣式會發生，但只要選擇另一個菜單項，顏色就會設置為白色（然后變回灰色）。
解決方案5
0 2017-10-22 14:08:42
您忘記關閉*的 CSS，這導致它下面的 CSS 無法應用。 糾正這一點會導致您的顏色更改按預期應用。
解決方案6
0 2017-10-22 14:51:19
您可以通過在 navbar-brand 上定義自定義類來嘗試
例如——
<a class="navbar-brand custom" href="#">iGloo</a>
.navbar-brand.custom{
color:blue
}
解決方案7
0 2018-01-19 08:26:23
添加一個額外的類名“品牌”：
<a class="navbar-brand brand" href="#">iGloo</a>
CSS 應該是這樣的：
.navbar-brand.brand {
color: rgb(255,255,255);
}
解決方案8
0 2019-09-24 05:01:00
由於這個問題是很久以前提出的，您現在一定已經想通了。 順便說一下，我剛剛提出了這個問題，上面提到的答案都沒有奏效。 問題出在我們使用的主題上。 在上面的問題中，您使用了 .navbar-light 主題。 所以你實際上無法使用自定義類訪問它。 所以只需通過主題類訪問。
.<your theme class> .navbar-brand{
}
所以你的 css 將是
.navbar-light .navbar-brand{
color:#fff;
}
解決方案9
0 2020-09-21 07:36:38
我有同樣的問題。 對我有用的是用 id 定義它。 由於 id 比類更具體且排名更高，因此它會起作用。 試試看，你會得到它。
首先，創建一個自定義 css 文件。 （將其鏈接到您的 html）在該 css 中，添加 id 並確保在“a”標簽中，在類之前添加 id。
Bootstrap Navbar品牌的顏色更改調試
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.