Question

我正在编辑一个Bootstrap模板，我正在尝试更改顶部导航菜单的颜色。

我在这里有代码的这一部分：

＆＃13;

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">

    <a class="navbar-brand" href="#"><img src="https://home.channeliser.com/Content/WebContent/images/logo1.png" alt="Channeliser" height="40" width="100"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">How it works</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

我尝试在CSS文件中使用navbarr类名来更改背景但它不起作用。任何帮助都会被贬低。

Answer 1

.navbar {
    background-color: red;
}

如果没有看到页面的所有CSS，就不可能知道它是否可行，但是如果没有任何其他CSS它就可以完成这项工作。

Answer 2

在 Bootstrap 4

上为我工作

解除删除 bg-light 类并添加自己的类

实施例

您的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

</nav>

更改为：

<nav class="navbar navbar-expand-lg navbar-light your-bg-navbar fixed-top">
   //navbar item
</nav>

删除 bg-light 和添加自己的CSS

添加CSS：

.your-bg-navbar {
    background-color: rgba(35,35,35,0);
}

rgba适用于透明颜色，您可以更改实体

background-color：red或#rgbcolor

希望这对你有用。

Answer 3

这是因为.bg-light的背景颜色为!important，因此除非您还使用!important，否则会覆盖您尝试的任何内容：

.navbar {
background: red !important;
}

Answer 4

根据经验，bootstrap css将优先于你的自定义css，除了你在属性的末尾添加！important标签。所以你的问题的答案是

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

可替换地，您可以使用自己的自定义类添加自定义css文件替换bg-light类。

HTML导航菜单背景颜色

4 个答案: