ブートストラップ4モバイルナビが消える

Question

私はちょうどブートストラップ3からブートストラップ4に変換され、私のモバイルナビゲーションバーに問題があります。トグルボタンを使用してナビゲーションバーを展開すると、ナビゲーションが消えます。なぜこれが起こっているのか分かりません。 navbarの下にはジャンボトロンがありますが、下のgifに示すように、モバイルナビゲータ全体が上に移動します。ここで

は、ナビゲーションバーとジャンボトロンのコードスニペットコードです：

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