带有navbar-fixed-top类并且可折叠表单无法正常工作的Bootstrap标题导航栏

Question

我在最初隐藏的页面顶部跟随 div ，其中包含可折叠登录表单。 我在顶部还有标题导航栏，它有一个锚点（名为“登录”），点击后会切换上面的登录表单。

<!--Login Form Collapse Div-->

        <div id="login" class="collapse" style="height: 0px; position:fixed;">
            <div class="container">
                <div class="top-form-inner">
                    <form class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail2">
                            Email address
                        </label>
                        <input id="exampleInputEmail2" class="form-control" type="email" placeholder="Enter email">
                        </input>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword2">
                            Password
                        </label>
                        <input id="exampleInputPassword2" class="form-control" type="password" placeholder="Password">
                        </input>
                    </div>
                    <a class="btn btn-primary" href="#">Login </a>
                    </form>
                </div>
            </div>
        </div>

        <--/Login Form Collapse Div-->

        <--Header Navbar Fixed Top-->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0px; background-color: #fff;">
                <div class="container">
                    <div class="navbar-header">
                        <button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                        <a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-dashboard"></span> Mobi <span class="sec-brand"> Market. </span> </a>
                    </div>

                    <!--Collect the header nav links, forms, and other content for toggling-->
                    <div class="navbar-collapse navbar-ex1-collapse collapse" style="height: 1px;">
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input class="form-control input-sm" type="text" placeholder="Enter Your Keyword">
                                </input>
                                <button type="submit" class="btn btn-default">Search</button>
                            </div>
                        </form>
                        <p class="navbar-text pull-right"> Already a user? 


    <--Login Anchor which I am using to toggle login form-->

    <a class="navbar-link" data-target="#login" data-toggle="collapse" href="#"> Login </a> 

<--/Login Anchor which I am using to toggle login form-->

    </p>
                        <div class="btn-toolbar pull-right">
                            <div class="btn-group"> <a class="btn btn-primary navbar-btn btn-sm" href="#"> <i class="fa fa-plus-circle"></i> Submit listing </a> </div>
                            <div class="btn-group"></div>
                        </div>
                    </div>
                    <!--/.navbar-collapse-->
                </div>
                <!--/Container-->
            </nav>
        <--/Header Navbar Fixed Top-->

如果我不添加课程“navbar-fixed-top”，一切正常。当我点击标题导航栏中的登录锚点时，登录表单会切换， 但是，只要我将类“navbar-fixed-top”添加到顶部标题，登录表单就会隐藏在标题nvabar后面。移动视图中的问题更严重。

以下是我想要做的演示：

Default navbar (working fine):

Navbar with class "navbar-fixed-top" (giving problem)