부트 스트랩 4 네비게이션 - 휴대 기기에서 높이가 없음

Question

모든 뷰포트의 네비게이션 높이를 80px로 설정하는 방법은 무엇입니까?

".navbar"에서 "min-height : 80px"를 시도했지만 탐색 바가 부러졌습니다.

말대꾸 코드 :

는

$navbar-bg:    #26f3fd; 
$navbar-height:   80px; 

.navbar { 
    background-color: $navbar-bg; 
    min-height: $navbar-height; 
} 

HTML 코드는 :

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="main-navbar" data-toggle="sticky-onscroll"> 
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse justify-content-md-center" id="navbar-content"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="<?= esc_url(home_url('/')); ?>">Accueil</a> 
     </li> 
    </ul> 
</div> 

http://codepen.io/juavenel/pen/xqMPrQ/

Answer 1

이 문제는 사용자의 네비게이션 바는 navbar-brand를 포함하지 않는 때문에 그래서 높이의 navbar가 수직으로 겹쳐지면 접 힙니다.

이

베타 버전에서 수정 될 예정 알려진 문제 : https://github.com/twbs/bootstrap/pull/22230이

해결 방법은 빈 placehold의 네비게이션 바 텍스트를 포함하거나 메뉴 바 브랜드입니다 ..

<nav class="navbar navbar-toggleable-md navbar-light bg-faded py-3" id="main-navbar"> 
    <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <span class="navbar-text">&nbsp;</span> 
    <div class="collapse navbar-collapse justify-content-md-center" id="navbar-content"> 
     <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Accueil</a> 
     </li> 
     </ul> 
    </div> 
</nav> 

http://www.codeply.com/go/FIKesgfDhL

은

또한 수직 채우기 (py-3)를 사용하여 탐색 표시 줄의 높이를 높이고 항목을 세로 가운데 맞춤으로 유지할 수 있습니다.