折叠导航栏上方的神秘线答案

【问题标题】：Mysterious Line above Collapsed navbar折叠导航栏上方的神秘线
【发布时间】：2018-02-19 17:00:53
【问题描述】：

我创建了一个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。过去有没有人遇到过这种情况？

【问题讨论】：

将 navbar-header 的 css 添加为无边框或不同颜色的边框底部。我想建议您浏览 broser 的控制台并检查元素并在 CSS 部分的某处查看边框底部属性并进行更新。
好像是伪元素，你知道怎么去掉吗？

标签： html css navbar bootstrap-grid

【解决方案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。

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

【讨论】：