Question

我创造了一个完美无缺的navbar，但是当菜单折叠时，它看起来像是一条神秘的黑线（见黄色箭头），它在汉堡下面运行。任何帮助删除这将非常感激。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HOW WE CAN HELP</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .navbar {
        margin-bottom: 0;
        border-radius: 0;
        background-color: transparent; /* need to choose company colors etc. */
        color: #fff;
        padding: 0% 0;
        border: 0;
        border-color: #fff;
      }
      .navbar-brand {
        float: left;
        min-height: 55px;
        padding: 0px 3px 10px 4px;
      }
      .navbar-inverse .navbar-nav .active a, 
      .navbar-inverse .navbar-nav .active a:focus, 
      .navbar-inverse .navbar-nav .active a:hover {
        color: #fff;
        background: #fb4f14;
      }
      /* when hovering over the nav items the colour changes to off whiate #d5d5dd */
      .navbar-inverse .navbar-nav li a {
        color: #fff;
      }
      /*
      .navbar.navbar-default .navbar-collapse {
      border: none;
      box-shadow: none;
      background-color: #fb4f14;
      }
      */
    </style>
  </head>
  <body>
    <head>
      <!-- navigation bar starts here -->
      <nav class="navbar 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="/index.html"><img height="130%" src="/img/logo-placeholder.png"></a>
          </div>
          <div class="collapse navbar-collapse" id="MyNavbar">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/index.html">Item 1</a></li>
              <li class="active"><a href="/pages/help.html">Item 2</a></li>
              <li><a href="#">Item 3</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </head>
  </body>
</html>

上面是我的HTML和CSS。过去有人遇到过这个吗？

Answer 1

使用.navbar-inverse时，默认颜色会变暗。请参阅反向导航类型的链接。

Link: Inverse Nav Bar with background color

你的错误是，你正在定义没有bg的逆向导航 - 如link所示。

请使用以下

，而不是反向

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

您将获得#fb4f14的预期导航背景作为背景颜色。但最简单的解决方案是，只要您想要自定义背景颜色，就可以使用其他类型的导航而不是navbar-inverse。

你的黑线并不神秘，因为当你没有为逆定义任何bg颜色时，inverse会将默认颜色设置为黑暗颜色。请参阅反向导航示例：

<nav class="navbar navbar-inverse "> <!-- default dark black line --->
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-inverse bg-primary"> <!-- primary color matched border line --->
  <!-- Navbar content -->
</nav>

折叠导航栏

1 个答案: