Question

我正在使用Twitter Bootstrap 3开发此网站，因为我已经完成了几次。但是在这个特殊的导航条中，导航栏在崩溃时具有奇怪的行为。当我单击切换按钮时，列表项首先对齐显示，没有一些CSS样式，然后居中应该是。

当我点击关闭按钮时，也会发生一些奇怪的事情，因为切换按钮本身会向左浮动一秒钟然后返回中心。

我在这里尝试过很多东西。重建菜单，删除一些自定义CSS，升级/降级我的jquery ...这里有一个小问题，这个bug并不完全相同，但它非常接近它：

<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项目中。

谢谢！

Bootstrap 3 Navbar Collapse是Buggy

1 个答案: