부트 스트랩을 사용하여 축소 형 탐색 표시 줄 표시 방법

Question

화면 크기를 조정할 때 단추로 전환되는 일부 단추가있는 부트 스트랩 탐색 모음이 있습니다.

그러나 버튼을 클릭하면 접을 수있는 메뉴가 표시되지 않습니다.

저는 div의 높이와 관련이 있다고 확신하지만 문제를 찾을 수 없습니다.

통찰력/팁/트릭/힌트를 보내 주시면 감사하겠습니다. Codepen https://codepen.io/oldmanwithbeer/pen/ENzvoY?editors=1100

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-bar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Nav bar</a> 
    </div> 

    <div class="collapse navbar-collapse" id="nav-bar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#social">Links</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div> 
</nav> 

Answer 1

에

링크 당신은 탐색 붕괴가 작동하도록하기 위해 jQuery를하고 부트 스트랩 자바 스크립트 파일을 모두 포함해야합니다.

여기 작업 버전으로 codepen 코드를 업데이트 한

:

https://codepen.io/egerrard/pen/YpmOGo

당신이 뭔가처럼 될 것입니다 추가해야합니다 태그 :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

것은 확실 jQuery를 포함되어 있는지 확인이 먼저.

또한 부트 스트랩 웹 사이트의 Getting Started 페이지가이 정보를 안내합니다.