【问题标题】:How to Change Background Color of Bootstrap Navbar如何更改引导导航栏的背景颜色
【发布时间】:2021-09-12 04:00:09
【问题描述】:

我正在尝试更改在 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>

【问题讨论】:

  • wicht 元素是什么? id="myNavbar"?
  • 它是 class="navbar"
  • 它没有将背景颜色更改为白色,如 class="bg-white" 中使用的那样

标签: html css twitter-bootstrap-3 navbar


【解决方案1】:
.navbar-light {
    background-color: yellow !important;
}

【讨论】:

  • 感谢 Preetam!有没有办法擦除它周围的边框...现在导航栏周围有一个黑色边框。
  • .navbar-light {border:none;}
  • .navbar-light { 背景色:黄色!重要;边框:无!重要;边框宽度:0!重要; }
【解决方案2】:

你查过color-boostrap v5

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

【讨论】:

    【解决方案3】:
    .navbar-light {
        background-color: yellow !important;
        border: none !important;
        border-width:0!important;
    }
    

    【讨论】:

    • 非常感谢 Preetam!成功了。
    猜你喜欢
    • 2015-05-27
    • 1970-01-01
    • 1970-01-01
    • 2014-07-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多