折叠导航栏上方的神秘线

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 了解反向导航类型。

Link: Inverse Nav Bar with background color

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

请用下面的

代替逆序

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

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

你的黑线并不神秘，因为当你没有为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>

折叠导航栏上方的神秘线

Mysterious Line above Collapsed navbar

html

css

navbar

bootstrap-grid