导航栏品牌不会改变引导程序 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.