如何使用引導程序顯示摺疊導航欄

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

如何使用引導程序顯示摺疊導航欄

回答

相關問題