2016-02-28 148 views
1

我已經構建了一個codepen上的引導程序導航欄,它爲移動摺疊並顯示一個圖標欄,單擊時應展開菜單,但菜單不會在單擊時展開。誰能告訴我我做錯了什麼?bootstrap導航欄崩潰圖標不觸發在codepen

我已經在CSS頁面上啓用了bootstrap,在Javascript頁面上啓用了jquery和bootstrap。

這裏的鏈接到codepen:http://codepen.io/bonfirehead/pen/xVxRxq

預先感謝您的幫助!

<div class="container-fluid"> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 


     <button class="navbar-toggle" data-toggle="collapse" data- target="#myNavBar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

     <div class="collapse navbar-collapse" id="myNavBar"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">CV</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    </nav> 

    <div class="row"> 
    <div class="column-xs-6 background1"> 
    </div> 



    <h2 class="background2 nopadding text-center"></h2> 
    </p> 
    </div> 
</div> 

<div class="column-xs-6"> 
</div> 
</div> 

回答

0

我無法在codepen或codeply上重現錯誤 - 單擊它時,導航欄上的移動樣式下拉菜單正確顯示。

這就是說,在第24行,你有一個關閉</nav>標記,但缺少開始標記。在第32行,您有一個未打開的</p>標記,並且在第37行上有一個未打開的</div>。過去我曾經看到,當涉及到這樣的事情時,HTML可能會有些挑剔,所以請嘗試糾正這些問題,看看是否可以解決您的問題。

+0

我根據您的建議修正了HTML,現在工作正常。非常感謝你的幫助。非常感激!! – bonfirehead