부트 스트랩 4 모바일 Navbar 사라짐

Question

방금 ​​부트 스트랩 3에서 부트 스트랩 4로 변환되었으며 내 모바일 탐색 표시 줄에 문제가 있습니다. 토글 버튼을 사용하여 탐색 막대를 확장하면 탐색이 사라집니다. 왜 이런 일이 일어나는지 알 수 없습니다. navbar 아래에 jumbotron이 있지만 아래의 gif에서 볼 수 있듯이 전체 mobile nav가 위로 이동합니다. 여기

는 네비게이션 바 및 대형 기기의 코드 코드 : 다음으로 모든 주에 대해, 전 세계적으로 .navbar의 높이를 설정하기 때문에

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