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导航栏不扩展

回答

相关问题