Question

我正在尝试使用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>

Answer 1

试试这个

＆＃13;

.navbar-default .navbar-brand{
    your snippet here
  }

＆＃13;

Answer 2

我的问题仍然存在我认为应该在调用bootstrap.min.css后调用你的自定义css

Answer 3

您忘记关闭*的CSS，导致其下方的CSS无法应用。更正此问题会导致颜色更改按预期应用。

Answer 4

您可以尝试通过navbar-brand

定义自定义类

例如 -

<a class="navbar-brand custom" href="#">iGloo</a>

.navbar-brand.custom{
  color:blue
}

Answer 5

添加其他类名称＆＃34;品牌＆＃34;：

if(strings.Split(new [] { "a" }, StringSplitOptions.None).Length == 2)

CSS应如下所示：

    <a class="navbar-brand brand" href="#">iGloo</a>

Answer 6

我使用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;
}

对于我来说，现在似乎可以使用...
注意：
如果放置了样式，则在创建导航栏后即会进行样式设置，但是一旦选择了另一个菜单项，颜色就会设置为白色（然后又变回灰色）。

Answer 7

自从很久以前问这个问题以来，您现在就已经知道了。顺便说一句，我只是想出了这个问题，上面提到的答案都没有用。问题在于我们正在使用的主题。在上述问题中，您使用了.navbar-light主题。因此您实际上无法使用自定义类访问它。因此，只需通过主题类进行访问。

.<your theme class> .navbar-brand{

}

所以您的CSS应该是

.navbar-light .navbar-brand{
color:#fff;
}

Answer 8

.navbar-brand{
    color:red !important;
  }

尝试这个。

Answer 9

我有同样的问题。对我有用的是用id定义它。由于id更具体，并且排名高于类，因此它将起作用。试试看，您会明白的。

首先，创建一个自定义的CSS文件。（将其链接到您的html）在该CSS中，添加ID，并确保在“ a”标签中，将ID添加在课程之前。

navbar-brand并没有改变bootstrap中的颜色4

9 个答案:

您可以尝试通过navbar-brand