jquery - Bootstrap Navbar Hamburger 菜单无法打开，下方有容器

Question

我有一个 Bootstrap 导航栏和一些 Bootstrap 内容。但是，当视口(viewport)很小时，汉堡包菜单不会打开，我想知道为什么。

如果我删除放在最底部导航下方的容器，一切似乎都很好。但是一旦我再次添加该位，我就无法打开我的导航栏。

https://jsfiddle.net/0yu7u2yc/1/

<div class="header container-fluid">

  <div class="row">
    <div class="brand col-sm-10 offset-sm-1 hidden-xs-down">
      <svg class="brand_logo"><use xlink:href="#brand_logo" /></svg>
    </div>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mx-auto">

      <li class="nav-item active">
        <a class="nav-link" href="index.php">Welcome<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Pricing
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdown_angebot">
          <a class="dropdown-item" href="softwareentwicklung.php">Action</a>
          <a class="dropdown-item" href="qualitaetssicherung.php">Another action</a>
        </div>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com">
          Our Company
        </a>

        <div class="dropdown-menu" >
          <a class="dropdown-item" href="geschichte.php">History</a>
          <a class="dropdown-item" href="karriere.php">Career</a>
          <a class="dropdown-item" href="klienten.php">Clients</a>
        </div>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="anfahrt.php">Get here<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="kontakt.php">Contact<span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>

  </div>
</div>


<div class="container-fluid">
      <div class="row">
        <div class="col-sm-10 offset-sm-1" style="background-color:red; height:500px; margin-top:50px;">
        If I remove this (whole) bit, the navbar hamburger menu works again.
         </div>
      </div>
</div>

SCSS

.header {
  background-color: $background_header;

  .brand {
    display: flex;
    justify-content: center;
    align-items: center;

    .brand_logo {
      width: 200px;
    }
  }

  .navbar-toggler {
        margin-top: 20px;
  }

  .navbar {
    height: 50px;
    padding: 0 !important;
    background-color: $background_header;

    .navbar-nav {
        display: table;
        width: 100%;
        list-style: none;

        .nav-link {
          padding: 0 !important;
        }

        li {
        display: table-cell;
        text-align: center;

          a {
            display: block;
            text-align: center;
          }

          &:first-child a {
              text-align: left;
          }
          &:last-child a {
              text-align: right;
          }



          &:hover .dropdown-menu, .dropdown-item:hover .dropdown-menu {
              display: block;
          }
          .dropdown-menu {
            // margin-top: 10px;
            left: 50%;
            transform: translateX(-50%);
          }

        }
    }
  }
}

Answer 1

标题下方的内容与汉堡菜单重叠。试试这个:

.navbar-toggler {
    z-index: 99999;
}