我的導航欄切換不會摺疊

我正在嘗試重做我的個人頁面，導致Navbar出現問題。當我第一次做它時，我沒有一個，現在我正在嘗試添加一個並更改整個佈局。我已經準備好了，一切都準備就緒，現在當屏幕很小時顯示圖標時，它不會崩潰。我遵循bootstrap的指示，我試圖更加精通它，但我似乎無法找到它爲什麼不起作用。我的代碼是在codepen.io 我的導航欄切換不會摺疊

<div class="container-fluid"> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
     <a class="navbar-brand" href="#">PORTFOLIO</a> 
    </div> 

    <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#slide2">Home <span class="sr-only"></span></a></li> 
     <li><a href="#slide2">About</a></li> 
     <li><a href="#slide3">Projects</a></li> 
     <li><a href="#slide4">Contact</a></li> 
     </ul> 
    </div> 

    </div> 
</nav>

來源

2016-10-02 riv

你需要串口你srcipt CDN這樣第一的jquery.js然後bootstrap.min.js –

您的代碼非常好。唯一的錯誤是在jQuery之前包含Bootstrap。

This是您的代碼的工作分支，其中我更改了包括jQuery的順序。您可以通過檢查包含外部資源（CSS或JS）的筆的設置來更改順序。

來源

2016-10-02 18:20:18

謝謝你，工作！我只記得那裏的順序很重要。 – riv

jQuery的不能正常工作，請嘗試從jQuery的CDN在最終代碼的關閉體之前，補充一點：

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>

來源

2016-10-02 18:01:34

看來你的jquery不起作用。在您的html文檔的頭部添加這些行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-10-02 18:10:45

我的導航欄切換不會摺疊

回答

相關問題