Question

我在导航栏上有一个登录按钮，它正常工作，但是当我尝试调整窗口大小时，我无法再登录栏了。

我已经附上了，所以请让我知道为什么当我调整窗口大小并且登录无法打开时它无效。

但这是我的导航条形码。

<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>

Answer 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

在手机上使用时，Bootstrap下拉菜单不起作用

1 个答案: