Bootstrap導航欄不擴展

我想用Bootstrap製作一個可摺疊的導航欄，但無論我嘗試了多少次，檢查了多少次，我都無法設置點擊按鈕來擴展導航欄。Bootstrap導航欄不擴展

這是我的HTML：

<section id="upper-section"> 
    <div class="container mini-container"> 
     <nav class="navbar navbar-default navbar-static-top"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-target="#nav" 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 href="index.html" class="navbar-brand"> 
         <img src="img/logo.png" alt="Logo"> 
        </a> 
       </div> 
       <div id="nav" class="navbar-collapse collapse navbar-right"> 
        <ul class="nav navbar-nav"> 
         <li class="active"> 
          <a href="index.html">Home</a> 
         </li> 
         <li> 
          <a href="prjects.html">Projects</a> 
         </li> 
         <li> 
          <a href="professors.html">Professors</a> 
         </li> 
         <li> 
          <a href="contact.html">Contact</a> 
         </li> 
         <li> 
          <a href="admin.html">Administration</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
</section>

而且我確信jquery正在加載bootstrap.js前：

<script src="js/jquery-2.1.4.js"></script> 
<script src="js/bootstrap.js"></script>

我不知道什麼是錯呢，爲什麼按下按鈕並沒有擴張導航欄？

編輯：fiddle

來源

2015-12-02 dabadaba

創建一個jsfiddle併發布您正在使用的css。 – Elow

您是否在控制檯中發現任何錯誤？（通過按F12進行檢查） –

@PraveenKumar沒有與Bootstrap相關的錯誤。 – dabadaba

它缺少您的按鈕上的數據開關

   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" 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>

來源

2015-12-02 14:08:41 Elow

https://jsfiddle.net/rrmjmaby/3/正確版本 –

-1

您需要使用在li元素下拉類，和下拉菜單中的UI元素：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Directorio MINSAL</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Exposiciones<span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Exposiciones 1</a></li> 
         <li><a href="#">Exposiciones 2</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Asambleas<span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Asambleas 1</a></li> 
         <li><a href="#">Asambleas 2</a></li> 
        </ul> 
       <li><a href="#">Estudiantes</a></li> 
       <li><a href="#">Maestros</a></li> 
       <li><a href="#">Formación pedágogica</a></li> 
       <li class="active"><a href="#">Item Activo</a></li> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="/login/final">Cerrar Sesión</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

...而F12是在這個情況下是非常有用的

來源

2015-12-02 14:08:36 VTacius

Bootstrap導航欄不擴展

回答

相關問題