Bootstrap 3 Navbar崩潰是Buggy

Question

我正在使用twitter Bootstrap 3開發這個網站，因爲我已經做了幾次。但是在這個特定的一箇中，導航欄在崩潰時具有奇怪的行爲。當我點擊切換按鈕時，列表項目首先顯示爲右對齊，沒有一些CSS樣式，然後居中，因爲它應該是。

當我點擊關閉按鈕時，會發生一些奇怪的事情，因爲切換按鈕本身會向左浮動一秒鐘，然後返回到中心。

我在這裏試過很多東西。重建菜單，刪除一些自定義的CSS，升級/降級我的jQuery ...以下是它的的jsfiddle，錯誤是不完全一樣的，但它是非常接近：

https://jsfiddle.net/grpaiva/oznL3ogb/

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) --> 
      <div class="col-md-2"><a class="navbar-brand relative" href="index.html"><img class="logo-header" src="" alt="Descola" /></a></div> 
     </div> 

     <div class="dropdown pull-right"> 
      <a class="red" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="hidden-sm hidden-xs">ENTRE OU CADASTRE-SE&nbsp;&nbsp;</span><b class="caret hidden-sm hidden-xs"></b><span class="glyphicon glyphicon-user hidden-lg hidden-md"></span></a> 
      <ul class="dropdown-menu"> 
       <li> 
        <form role="form" method="post" action="" novalidate> 
         <div class="form-group"><input type="email" class="form-control" name="user_email" value="" placeholder="EMAIL" /></div> 

         <div class="form-group"><input type="password" class="form-control" name="user_password" value="" placeholder="SENHA" /></div> 

         <div class="row"> 
         <div class="col-lg-12"> 
          <input type="hidden" name="url" value="" /> 
          <button type="submit" class="btn btn-default" name="">ENTRAR</button> 
         </div> 
         </div> 
        </form> 
        <div class="clear"></div> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <p class="pull-left" id="login-over-esqueci"><a href="#esqueci-minha-senha" role="button" data-toggle="modal">Esqueci minha senha</a></p> 
         </div> 
        </div> 
        <p class="clear"></p> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <p id="top-facebook-login"><a href="#"></a></p><!-- retirei o codigo do facebook --> 
          <p>Ainda não é um membro?</p> 
          <p><a class="regular" href="">Cadastre-se aqui</a></p> 
         </div> 
        </div> 

        <div class="row mtop20"> 
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
          <p id="top-login-logout" class="pull-right"><a href="<?php echo base_url("login/logout"); ?>"><span class="glyphicon glyphicon-off" aria-hidden="true"> </span> Sair</a></p> 
         </div> 
        </div> 
       </li> 
      </ul> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse pull-right"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">o que é a descola?</a></li> 
       <li><a href="#">cursos</a></li> 
       <li><a href="#">drops</a></li> 
       <li><a href="#">contato</a></li> 
       <li><a href="#">faq</a></li> 
       <li><a href="#">para empresas</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div><!-- /.container --> 
    </nav> 

不任何人都有這方面的線索？

Answer 1

我明白了！

問題出在自定義CSS中，我不得不添加class .collapsing到我的li項目。

謝謝！