Bootstrap 3 Navbar崩溃是越野车

Question

I'm developing this website using twitter Bootstrap 3 as I've done a few times. But in this particular one the navbar, when collapsed, is having an odd behavior. When I click on the toggle button, the list items are displayed first aligned right, without some css styles, and then centered as it should be.

When I hit the close button, something strange happens too, as the toggle button itself floats left for a second and then return to the center as it should be.

I've tried a lot of things here. Rebuilding the menu, deleting some custom css, upgrading/downgrading my jquery...here's a jsfiddle of it, the bug is not exactly the same but it's very close to it:

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>

Does anyone have a clue on that one?

Answer 1

I got it!

The problem was in the custom CSS, I had to add the class .collapsing to my li items.

Thanks!