我正在尝试使用Bootstrap 4更改navbar-brand类的颜色，但不知怎的，它不会改变。我试图阅读文档，但仍然无法找到它为什么不起作用。我添加了一个navbar-custom类来定位navbar-band类。
我的代码：
@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>
答案 0 :(得分：1)
试试这个
.navbar-default .navbar-brand{
your snippet here
}
答案 1 :(得分：1)
我的问题仍然存在我认为应该在调用bootstrap.min.css后调用你的自定义css
答案 2 :(得分：0)
您忘记关闭*的CSS，导致其下方的CSS无法应用。更正此问题会导致颜色更改按预期应用。
答案 3 :(得分：0)
例如 -
<a class="navbar-brand custom" href="#">iGloo</a>
.navbar-brand.custom{
color:blue
}
答案 4 :(得分：0)
添加其他类名称＆＃34;品牌＆＃34;：
if(strings.Split(new [] { "a" }, StringSplitOptions.None).Length == 2)
CSS应如下所示：
<a class="navbar-brand brand" href="#">iGloo</a>
答案 5 :(得分：0)
我使用asp.net core 2.2，刚刚从Bootstrap 3.3.7更新到4.3.1，现在尝试使我的布局重新工作...
我也有这个问题（还有更多其他问题：:)
在我的情况下，默认情况下，导航栏品牌应为灰色，如果悬停，则应更改为白色。更新后，它始终显示为白色（鼠标悬停不起作用）。
在bootstrap.css中显式设置颜色无效。
在我的情况下，唯一的（不好的）解决方法是在创建导航栏之前用！important 设置（在我使用asp时，在_Layout.cshtml中） .net core 2.2）。
<style type="text/css">
.navbar-brand {
color: #9d9d9d !important;
}
.navbar-brand:hover, .navbar-brand:focus {
color: #fff !important;
}
对于我来说，现在似乎可以使用...
注意：
如果放置了样式，则在创建导航栏后即会进行样式设置，但是一旦选择了另一个菜单项，颜色就会设置为白色（然后又变回灰色）。
答案 6 :(得分：0)
自从很久以前问这个问题以来，您现在就已经知道了。顺便说一句，我只是想出了这个问题，上面提到的答案都没有用。问题在于我们正在使用的主题。在上述问题中，您使用了.navbar-light主题。因此您实际上无法使用自定义类访问它。因此，只需通过主题类进行访问。
.<your theme class> .navbar-brand{
}
所以您的CSS应该是
.navbar-light .navbar-brand{
color:#fff;
}
答案 7 :(得分：0)
.navbar-brand{
color:red !important;
}
尝试这个。
答案 8 :(得分：0)
我有同样的问题。对我有用的是用id定义它。由于id更具体，并且排名高于类，因此它将起作用。试试看，您会明白的。
首先，创建一个自定义的CSS文件。 （将其链接到您的html） 在该CSS中，添加ID，并确保在“ a”标签中，将ID添加在课程之前。