2017-11-07 4 views
1

부트 스트랩 4 베타 안내서를 바로 보겠습니다. li 링크가 확장 된보기에서 정상적으로 표시되지만 중단 점을지나 축소하면 사라지고 햄버거 메뉴가 나타나지 않습니다.Boostrap 4 navbar 요소가 햄버거 메뉴 버튼없이 나타납니다.

왜 이런 식으로 생각하나요? 나는 그것이 붕괴 플러그인과 관련이 있다고 의심하지만 확신이 없다.

<div class="header"> 
    <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="/"> 
       <img alt="Trellis" src="../../images/trellis.png"> 
      </a> 
     </div> 
     <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 mr-auto"> 
       <li class="nav-item"> 
        <a class="nav-link" href="/signout">Sign Out</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="/invite">Invite Friends</a> 
       </li> 
       <li class="nav-item "> 
        <a class="nav-link" href="/dashboard">My Plots</a> 
       </li> 
       <li class="nav-item "> 
        <a class="nav-link" href="/addPlot">Add Plots</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 

답변

1

는 부트 스트랩 4 베타를 사용하는 경우, 클래스는 "-역 네비게이션 바 '와'BG-역 : 그것은 HTML로 컴파일 할 때 내가 여기 반작용 실행 만하고있어

내 코드입니다 ""navbar-dark "및"bg-dark "로 각각 변경해야합니다.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 

으로

<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> 

에서이 프레임 워크의 베타 버전에 알파에서 부트 스트랩 팀에 의해 변경되었습니다. 따라서 프레임 워크의 "alpha"버전에서는 inverse를 사용하고 프레임 워크의 베타 버전에서는 "dark"를 사용하려고합니다.

코드 예 https://codepen.io/Washable/pen/mqrXoa