在保持切换菜单（汉堡包）的同时更改导航栏背景颜色

Question

我想为我的导航栏使用自定义颜色 ( #5f788a )，但是，我知道为了在移动版本中使用切换菜单，导航栏类必须是 navbar-light 或 navbar-dark（根据 Bootstrap）。 当然，这会覆盖我的自定义导航栏颜色，看起来我必须在汉堡菜单或我的自定义颜色之间进行选择。

我尝试过的事情：

1）。 使用! important 在 CSS 中! important以覆盖样式； 2）。 使用 CSS 中的 background-color 属性进行样式设置； 3）。 样式体，但这会影响网站的其余颜色，而不仅仅是导航栏。

这是CSS：

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #5f788a;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}


.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

#parent {
    list-style: none;
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

和网站的：

<body>
    <header class="site-header">

      <nav class="navbar navbar-default navbar-expand-md navbar-light fixed-top">
        <div class="container">

          <a class="navbar-brand mr-4" href="/">Company Name (v0.01)</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="/about">About</a>
            </div>

<!--            SEARCH BOX-->
<!--            <form class="form-inline my-2 my-lg-0">-->
<!--              <input class="form-control mr-sm-1" id="search_box" type="search" placeholder="Find some stuff..." aria-label="Search" align="middle">-->
<!--              <a href="{{ url_for('search_posts', keyword='sdf' ) }}"><button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" align="center">Search</button></a>-->
<!--            </form>-->

            <!-- Navbar Right Side -->
            <div class="navbar-nav">
                {% if current_user.is_authenticated %}
                    <a class="nav-item nav-link" href="/post/new">New Post</a>
                    <a class="nav-item nav-link" href="/send_invites">Invite</a>
                    <a class="nav-item nav-link" href="/account">My Account</a>
                    <a class="nav-item nav-link" href="/logout"><span class="glyphicon glyphicon-log-in"></span> Logout</a>
                {% else %}
                    <a class="nav-item nav-link" href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
                    <a class="nav-item nav-link" href="/register"><span class="glyphicon glyphicon-user"></span> Register</a>
                {% endif %}

            </div>
          </div>
        </div>
      </nav>

    </header>

难道是我应该尝试塑造身体？ 如果是这样，那会不会影响网站的其余部分，而不仅仅是导航栏？ 谢谢你的帮助

Answer 1

navbar-light 和 navbar-dark 是辅助类，它们的作用是将文本颜色从白色（如果导航栏-暗）更改为黑色（如果导航栏-亮），这样导航栏上的文本颜色就不会冲突使用导航栏颜色，您可以执行以下操作：

    .navbar {background-color: #5f788a;}

并将“navbar-dark”类添加到您的导航元素。

这是假设您使用的是最新版本的引导程序 4.3

---

Bootstrap 4.0.0 演示如下：

 body { background: #fafafa; color: #333333; margin-top: 5rem; } h1, h2, h3, h4, h5, h6 { color: #444444; } .bg-steel { background-color: #5f788a; } .site-header .navbar-nav .nav-link { color: #5f788a; } .site-header .navbar-nav .nav-link:hover { color: #ffffff; } .site-header .navbar-nav .nav-link.active { font-weight: 500; } .content-section { background: #ffffff; padding: 10px 20px; border: 1px solid #dddddd; border-radius: 3px; margin-bottom: 20px; } .article-title { color: #444444; } a.article-title:hover { color: #428bca; text-decoration: none; } .article-content { white-space: pre-line; } .article-img { height: 65px; width: 65px; margin-right: 16px; } .article-metadata { padding-bottom: 1px; margin-bottom: 4px; border-bottom: 1px solid #e3e3e3 } .article-metadata a:hover { color: #333; text-decoration: none; } #parent { list-style: none; width: 100%; height: 90px; margin: 0; padding: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .article-svg { width: 25px; height: 25px; vertical-align: middle; } .account-img { height: 125px; width: 125px; margin-right: 20px; margin-bottom: 16px; } .account-heading { font-size: 2.5rem; } @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

 <!DOCTYPE html> <!-- saved from url=(0044)https://stack.fleeksite.com/bootstrap-navbar --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>TurboTobias</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <header class="site-header"> <nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top" style="background-color: rebeccapurple;"> <div class="container"> <a class="navbar-brand mr-4" href="https://stack.fleeksite.com/">Bench of Thoughts (v0.01)</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarToggle"> <div class="navbar-nav mr-auto"> <a class="nav-item nav-link" href="https://stack.fleeksite.com/about">About</a> </div> <!-- Navbar Right Side --> <div class="navbar-nav"> <a class="nav-item nav-link" href="https://stack.fleeksite.com/login"><span class="glyphicon glyphicon-log-in"></span> Login</a> <a class="nav-item nav-link" href="https://stack.fleeksite.com/register"><span class="glyphicon glyphicon-user"></span> Register</a> </div> </div> </div> </nav> </header> </body> </html>

Answer 2

你可以添加：-

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

而不是你之前写的