如何更改 Bootstrap 导航栏的背景颜色

Question

我正在尝试更改 Bootstrap 中编码的导航栏的颜色。到目前为止，已经有内置的 Bootstrap 类应用于导航栏来更改背景颜色和其中的锚链接，但它们根本没有更改颜色。有什么办法可以解决这个问题吗？

这是 HTML：

<!-- import Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-light bg-white navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>    
      </button>
      <!-- <a class="navbar-brand" href="#">WebSiteName</a> -->
      <a href="index.html"><img src="fusebloomLogo.png" alt="FuseBloom logo" class="logo"/></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#mission">Mission</a></li>
        <li><a href="#reviews">Reviews</a></li>
        <li><a href="#process">Process</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

.navbar-light {
    background-color: yellow !important;
    border: none !important;
    border-width:0!important;
}

Answer 2

.navbar-light {
    background-color: yellow !important;
}

Answer 3

您检查过吗color-boostrap v5

<nav class="navbar navbar-light" style="background-color: #ffffff;">
    <!-- Navbar content -->
</nav>

Answer 4

对于 Bootstrap v5，他们有背景颜色实用程序。因此，您可以通过添加某个类来添加一种预制的 Bootstrap 颜色。例如，添加类

bg-primary

将为导航栏的背景着色为主要 Bootstrap 蓝色。它们还有黄色，您可以在课程中添加它

bg-warning

这里是所有可用颜色的链接：

https://getbootstrap.com/docs/5.2/utilities/background/

Answer 5

顺风解决方案

所有 React Bootstrap 组件都可以使用 TailwindCSS 进行样式设置，因此您只需向

className

添加背景颜色即可：

<Navbar
        expand="lg"
        className="px-3 bg-stone-800"
      >
...

</Navbar>