javascript - Bootstrap 3 Navbar Collapse 是 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 中，我不得不将类 .collapsing 添加到我的 li 元素中。

谢谢!