我使用两个 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>最佳答案
问题是，您的第二个切换按钮具有针对两个导航栏的 data-target=".navbar-collapse"。在第二个可折叠对象上使用 id 并将其作为目标，就像下面的示例一样(我在这里使用 #bs-example-navbar-collapse-2)。
<!--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>关于html - 移动端显示时两个导航栏一起延伸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48610365/