Как показать сворачивающуюся навигационную панель с помощью бутстрапа

Question

У меня есть навигационная панель Bootstrap с некоторыми кнопками, которая превращается в кнопку при изменении размера экрана.

Нажатие кнопки, однако, не отображает складное меню, как должно быть.

Я уверен, что это как-то связано с высотой 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 и Bootstrap JavaScript файлы, чтобы получить Распад нав работать.

Я обновил свой 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 на веб-сайте Bootstrap поможет вам ознакомиться с этой информацией.