在移动设备上显示时，两个导航栏一起扩展

时间：2018-02-04 16:27:08

标签： html css twitter-bootstrap

我使用两个Bootstrap 3导航栏，第一个是默认值，第二个是反向导航栏。问题是当我在移动设备中显示页面时，两者正常折叠，但是当我将第二个导航栏扩展到一起时。此外，当我崩溃时，第二个都崩溃了。

<!--Start NAVBAR 1-->
<nav class="navbar navbar-default" style="font-weight: bold; background-color: white;    margin-bottom: 0; margin-top: 0;
border-color: transparent;" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <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>
        <img src="" class="img-responsive" href="#" style="padding-left:50px;">
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-center" id="bs-example-navbar-collapse-1">
        <div class="col-xs-offset-3 col-xs-6 text-center">
            <ul class="nav navbar-nav navbar-center">
                <li>
                    <form class="navbar-form" role="search" style="padding-top:15px">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="q">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i style="color:#183F66" class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </li>
            </ul>
        </div>
        <ul class="nav navbar-nav navbar-right" style="padding-top:10px; margin:0 !important;">
            <li><a href="#" style="color:#183F66"><span class="glyphicon glyphicon-log-out" style="color:#183F66"></span> Logout</a></li>
            <li><a href="#" style="color:#183F66"><span class="glyphicon glyphicon-user" style="color:#183F66"></span> username</a></li>
        </ul>
    </div>
</nav>
<!--END NAVBAR 1-->
<!--Start NAVBAR 2-->
<div class="navbar navbar-inverse">
    <!--  <div class="container"> -->
    <div style="margin-left:5px;margin-right:5px">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav" style="color:white">
                <li>@Html.ActionLink("News", "About", "Home", new { Style = "color:White; font:bold" })</li>
                <li>@Html.ActionLink("Supervisors", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
                <li>@Html.ActionLink("About SaVeIT", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
            </ul>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分：1)

问题是，您的第二个切换按钮有data-target=".navbar-collapse"，它同时针对两个导航栏。在第二个可折叠的地方使用id并使用它进行定位，就像下面的示例一样（我在这里使用#bs-example-navbar-collapse-2）。

＆＃13;
＆＃13; 
<!--Start NAVBAR 1-->
<nav class="navbar navbar-default" style="font-weight: bold; background-color: white;    margin-bottom: 0; margin-top: 0;
border-color: transparent;" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <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>
        <img src="" class="img-responsive" href="#" style="padding-left:50px;">
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-center" id="bs-example-navbar-collapse-1">
        <div class="col-xs-offset-3 col-xs-6 text-center">
            <ul class="nav navbar-nav navbar-center">
                <li>
                    <form class="navbar-form" role="search" style="padding-top:15px">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="q">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i style="color:#183F66" class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </li>
            </ul>
        </div>
        <ul class="nav navbar-nav navbar-right" style="padding-top:10px; margin:0 !important;">
            <li><a href="#" style="color:#183F66"><span class="glyphicon glyphicon-log-out" style="color:#183F66"></span> Logout</a></li>
            <li><a href="#" style="color:#183F66"><span class="glyphicon glyphicon-user" style="color:#183F66"></span> username</a></li>
        </ul>
    </div>
</nav>
<!--END NAVBAR 1-->
<!--Start NAVBAR 2-->
<div class="navbar navbar-inverse">
    <!--  <div class="container"> -->
    <div style="margin-left:5px;margin-right:5px">
        <div class="navbar-header">
            <!-- Note: data-target="#bs-example-navbar-collapse-2" -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Note the new id: #bs-example-navbar-collapse-2 -->
        <div class="navbar-collapse collapse"  id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav" style="color:white">
                <li>@Html.ActionLink("News", "About", "Home", new { Style = "color:White; font:bold" })</li>
                <li>@Html.ActionLink("Supervisors", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
                <li>@Html.ActionLink("About SaVeIT", "Contact", "Home", new { Style = "color:White; font:bold" })</li>
            </ul>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题