2015-11-02 120 views
0

我在导航栏上有一个登录按钮,它正常工作,但是当我尝试调整窗口大小时,我无法再登录栏打开。Bootstrap下拉菜单在手机上使用时不起作用

我附上了所以请让我知道为什么它不工作时,我重新窗口大小和登录无法打开。

但这是我的导航条形码。

<nav class="navbar navbar-default navbar-custom navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header page-scroll"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> <a class="navbar-brand" href="index.html"></a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <!-- <ul class="nav navbar-nav"> 
        <li> 
         <a href="index.html">Money exchange</a> 
        </li> 
        <li> 
         <a href="about.html">Admin</a> 
        </li>      
       </ul> --> 
      <!-- <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
      </ul> --> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a> 
       </li> 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span style="margin-right:5px;" class="glyphicon glyphicon-log-in"></span>Login <span class="caret"></span></a> 
        <ul id="login-dp" class="dropdown-menu"> 
         <li> 
          <div class="row"> 
           <div class="col-md-12">Login via 
            <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> 
<a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> 

            </div>or 
            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> 
             <div class="form-group"> 
              <label class="sr-only" for="exampleInputEmail2">Email address</label> 
              <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
             </div> 
             <div class="form-group"> 
              <label class="sr-only" for="exampleInputPassword2">Password</label> 
              <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
              <div class="help-block "><a href="" style="color:grey;">Forget the password ?</a> 
              </div> 
             </div> 
             <div class="form-group"> 
              <button type="submit" class="btn btn-primary btn-block">Sign in</button> 
             </div> 
             <div class="checkbox"> 
              <label> 
               <input type="checkbox">keep me logged-in</label> 
             </div> 
            </form> 
           </div> 
           <div class="bottom text-center">New here ? <a href="#" style="color:grey;"><b>Join Us</b></a> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

回答

1

没有什么错在问题的代码

Fiddle with only code posted in question

你的Dropbox连接的代码,有一个文件名creative.js你点击功能的响应

时关闭菜单
// Closes the Responsive Menu on Menu Item Click 
$('.navbar-collapse ul li a').click(function() { 
    $('.navbar-toggle:visible').click(); 
}); 

造成问题

Fiddle with problem

如果你删除了代码,将不会有问题,响应菜单将正常工作。

Fiddle

相关问题