如何使用引导程序显示折叠导航栏

我有一个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>

来源

2016-12-29 KarmaKing

[bootsrap nav-bar collapsable可能重复无法使其工作]（http://stackoverflow.com/questions/38705798/bootsrap-nav-bar-collapsable-cannot-make-it-work） – vanburen

您需要包括jQuery和引导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是包括第一。

此外，Bootstrap网站上的Getting Started页面可帮助您了解此信息。

来源

2016-12-29 23:49:26

谢谢，那做了这份工作！ – KarmaKing

如何使用引导程序显示折叠导航栏

回答

相关问题