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

【问题标题】：navbar-brand is not changing the color in bootstrap 4navbar-brand 没有改变 bootstrap 4 中的颜色
【发布时间】：2018-04-03 03:14:46
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

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

试试这个。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

我使用 asp.net core 2.2，刚刚从 Bootstrap 3.3.7 更新到 4.3.1，现在尝试让我的布局再次工作...... 我也有这个问题（以及其他各种问题...... :-)
在我的情况下，导航栏品牌默认应该是灰色的，如果被悬停，则变为白色。更新后，它总是显示为白色（胡佛不工作）。在 bootstrap.css 中显式设置颜色不起作用。在我的情况下，唯一（不是很好）的解决方法是使用 !important before 创建导航栏（在我使用 _Layout.cshtml 的情况下，我使用 asp .net 核心 2.2)。

 <style type="text/css">
.navbar-brand {
  color: #9d9d9d !important; 
}
.navbar-brand:hover, .navbar-brand:focus {
color: #fff  !important;
}

现在似乎对我有用...
注意：
如果放置了样式，则在创建导航栏后，样式就会发生，但一旦选择了另一个菜单项，颜色就会设置为白色（然后变回灰色）。

【讨论】：

【解决方案5】：

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

【讨论】：

我做了，但它仍然不会改变
确保你到main.css的路径是有效的；因为您提供的已编辑代码使 iGloo 变为白色，直到您将鼠标悬停在它上面。

【解决方案6】：

您可以通过在 navbar-brand 上定义自定义类来尝试

例如-

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

.navbar-brand.custom{
  color:blue
}

【讨论】：

这个 css 你应该在 bootstrap.min.css 之后定义。 AHmed

【解决方案7】：

添加额外的类名“brand”：

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

CSS 应该如下所示：

    .navbar-brand.brand {
       color: rgb(255,255,255);
    }

【讨论】：

【解决方案8】：

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

.<your theme class> .navbar-brand{

}

所以你的 css 会是

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

【讨论】：

【解决方案9】：

我有同样的问题。对我有用的是用 id 定义它。由于 id 比 classes 更具体且排名更高，因此它将起作用。试试看，你会得到它。

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

【讨论】：