Bootstrap Navbar汉堡菜单不能用下面的容器打开

Question

我有一个引导程序导航栏，并在一些引导程序内容下面。但是，当视口很小时，汉堡菜单不会打开，我不知道为什么。

如果我删除了放在最底部的容器，导航下面的东西看起来很好。但是，一旦我再次添加该位，我无法打开我的导航栏。

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; 
} 

Answer 2

汉堡包按钮元素没有将它的高度传递给它的父级（navbar）。所以父元素的高度为1px + 2x填充，它只覆盖按钮的顶部。注意你可以按下顶部的按钮。此添加到导航栏元素CSS：

min-height: calc(40px + 1rem); 

（40像素是按钮的高度和2x .5​​rem用于填充）。