【发布时间】：2016-05-30 09:29:56
【问题描述】：
首先，我想这是一个很好的例子，说明如何使用 Bootstrap 实现多级导航栏（这是我长期以来一直在努力解决的问题）
其次，我有一个关于防止内容在导航栏上折叠的问题。
我的导航栏有三行，两个 navbar-default 和一个 navbar-inverse，以及三个按钮在折叠时控制每个部分：
代码：
<nav class="navbar navbar-fixed-top">
<div class="navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed pull-left"
data-toggle="collapse"
data-target="#megaNav"
aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#siteNav"
aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#authNav"
aria-expanded="false"
aria-controls="navbar">
<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="#">NewCo</a>
</div>
<div id="siteNav" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
English <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">English</a></li>
<li><a href="#">French</a></li>
<li><a href="#">Spanish</a></li>
<li><a href="#">Italian</a></li>
<li><a href="#">German</a></li>
</ul>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="navbar-default">
<div class="container">
<div id="authNav" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Log in</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="navbar-inverse">
<div class="container">
<div id="megaNav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</nav>
https://jsfiddle.net/7Ltspomz/
我设法做到这一点的唯一方法是有两个下拉按钮；一种显示 sm、md 和 lg，另一种仅显示在 xs 中。我不是特别喜欢这种方法，因为它会复制内容——即使内容不多，但从很多角度来看，这并不是特别好。
关于如何实现这一点的任何想法？
【问题讨论】：
-
我稍后再看看，但只是好奇导航栏中是否允许使用
class="row"？如果您可以分隔行，那将解决您的问题 -
@ScottSelby 我认为导航栏中允许使用行，但根据过去的经验使用它有点棘手。
-
您实际上已将下拉按钮放入表单中，搜索栏是单个 div。这就是它下降的原因。
-
@AJAY - 是的，我是从“桌面优先”的角度设计的，所以按钮在桌面的正确位置，而不是在移动设备上。或许我应该从移动优先的角度来理解 Bootstrap :-|
标签： html css twitter-bootstrap