1

我已经创建了一个navbar完美的作品，但似乎有一条神秘的黑线（见黄色箭头）在菜单折叠时在汉堡下方运行。任何有助于消除此问题的帮助将不胜感激。

带有神秘黑线的 Boostrap 导航栏

<!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。过去有没有人遇到过这种情况？

4

1 回答 1

0

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

链接：带背景颜色的反向导航栏

您的错误是，您正在定义没有 bg- 的反向导航，如链接所示。

而不是逆，请使用以下

<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>
于 2018-02-19T20:26:14.203 回答