Question

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

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

<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

汉堡包按钮元素没有将它的高度传递给它的父级（导航栏）。因此父元素的高度为1px + 2x填充，仅覆盖按钮的顶部。注意如何按下顶部的按钮。将其添加到navbar元素css：

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

（40px是按钮的高度，2x .5rem是填充）。

Bootstrap Navbar汉堡菜单无法打开下方的容器

2 个答案: