Bootstrap 4 移动导航栏消失

Question

我刚从 Bootstrap 3 转换到 Bootstrap 4，我的移动导航栏出现问题。使用切换按钮展开导航栏时，导航消失。我无法弄清楚为什么会这样。导航栏下方有一个 jumbotron，但整个移动导航向上移动，如下 gif 所示。

这里是navbar和jumbotron的sn-p代码：

.navbar {
  position: relative;
}

.jumbotron {
  margin: 0;
  padding: 10rem 0;
  ;
  min-height: 60vh;
  background-color: transparent;
  background: linear-gradient(110deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.45) 100%), url(../../assets/img/jumbohome.jpg);
  background-attachment: scroll;
  background-repeat: none;
  background-position: left;
  background-size: cover;
}

.navbar {
  font-family: 'Lato', sans-serif;
  height: 10rem;
  font-size: 1.7rem;
  &-brand {
    height: 6rem;
    margin-right: 5rem;
  }
  &-brand img {
    height: 100%;
  }
  & li:not(last-child) {
    margin-right: 3vw;
  }
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: $color-primary;
}

.dropdown {
  &-menu {
    position: relative;
    border: 0;
    border-radius: 0;
  }
  &-item {
    font-size: 1.7rem;
    &:hover,
    &:active {
      background: #fff;
      color: $color-primary;
    }
  }
}

.bg-light {
  background-color: #fff !important;
}

@media (max-width: 991px) {
  .navbar {
    &-brand {
      margin-right: 0;
      margin: 0 auto;
    }
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-collapse-md navbar-light fixed-top bg-light">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="" alt="Logo"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      About
                </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Our Mission</a>
            <a class="dropdown-item" href="#">Our Story</a>
            <a class="dropdown-item" href="#">Our Team</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Tag2
                </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Dropdown1</a>
            <a class="dropdown-item" href="#">Dropdown2</a>
            <a class="dropdown-item" href="#">Dropdown3</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Tag3
                </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Dropdown1</a>
            <a class="dropdown-item" href="#">Dropdown2</a>
            <a class="dropdown-item" href="#">Dropdown3</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron">
  <div class="container">
    <h1>Tagline</h1>
    <a href="#" class="btn-custom">Learn More</a>
  </div>
</div>

Answer 1

发生这种情况是因为您在全局范围内为每个状态设置了 .navbar 的高度：

.navbar {
    font-family: 'Lato', sans-serif;
    height: 10rem;/* this is the issue */
    font-size: 1.7rem;
}

这样，即使菜单折叠，高度也会受到限制，但会显示出来。然而，在那种状态下，它非常高，包括下拉菜单。因此，您可以像这样在媒体查询中设置高度：

.navbar {
    font-family: 'Lato', sans-serif;
    font-size: 1.7rem;
}

@media only screen and (min-width : 992px) {
    .navbar {
        height: 10rem;
    }
}