Question

我想用一个简单的css代码更改我的bootstrap导航栏的背景颜色和字体颜色：

＆＃13;

#mainNav {
        overflow: hidden;
        background-color: transparent;
    	color: #333;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
    }
    .navbar a{
    	color: #333;
    }

＆＃13;

我得到透明背景，字体颜色是白色（而不是黑色）

我的引导程序导航条代码如下：

＆＃13;

<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                    </button>
      <a class="navbar-brand page-scroll" href="#page-top"><img src="img/abc.png" alt="logo" width="72" height="68" id="logo">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#services">services</a>
        </li>
        <li>
          <a class="page-scroll" href="#portfolio">portfolio</a>
        </li>
        <li>
          <a class="page-scroll" href="#portfolio_sectors">Sectors</a>
        </li>

        <li>
          <a class="page-scroll" href="#my_carousel">References</a>
        </li>

        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
        <li>
          <a class="page-scroll" href="#team">Team</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

＆＃13;

我无法弄清楚我做错了什么。

Answer 1

您确实正确定位了元素，并且${substlist}的规则正在应用。问题是Bootstrap正在提供 higher specificity ：.navbar a正在覆盖.navbar-default .navbar-brand。因此，您可以使用.navbar a来定位徽标而不是.navbar-default a.navbar-brand，从而提供更高的特异性。

请注意，您的.navbar a选择器确实应用了所有自定义规则。

这可以在以下示例中看到：

#mainNav

#mainNav {
  overflow: hidden;
  background-color: transparent;
  color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

.navbar-default a.navbar-brand {
  color: #333;
  color: red /* To clearly showcase the override */
}

希望这有帮助！：）

bootstrap navbar：覆盖字体颜色

1 个答案: