Bootstrap 3 Navbar Collapse is Buggy

Question

Я разрабатываю этот сайт, используя твиттер Bootstrap 3, как я это делал несколько раз. Но в этом конкретном случае navbar, когда рушится, имеет странное поведение. Когда я нажимаю на кнопку переключения, элементы списка отображаются сначала выравниваются вправо, без каких-либо стилей 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, мне пришлось добавить класс .collapsing к моим ли элементам.

Спасибо!