twitter-bootstrap 创建一个 Bootstrap 双导航栏，只有第二行可折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26080668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a Bootstrap twin navbar, only 2nd row collapsible
提问by user3388925
I want to create a twin navbar (two rows) with Bootstrap.
我想用 Bootstrap 创建一个双导航栏（两行）。
The navbar template doesn't really meet my design goals, which look something like: (this demo)
导航栏模板并没有真正满足我的设计目标，看起来像：（ 这个演示）
+-------------+--------------------------------+
| title | | this part does not collapse
+-------------+--------------------------------+
| two-line | two-line | | on smaller screens,
| button | button | | collapses to 'hamburger' menu
+----------------------------------------------+
I am having difficulty collapsing the 2nd row into the hamburger menu.
我很难将第 2 行折叠到汉堡菜单中。
My code is: (did this manually to achieve look as above)
我的代码是：（手动执行此操作以实现上述外观）
<table>
<tr>
(1 cell for title, 1 cell for rest of row)
</tr>
<tr class="nav2">
<td style="width:100%;" colspan="2">
<table style="width:600px;">
<tr>
<td style="width:100%;">
<div class="container-fluid">
<div class="row">
<a href="#"><div class="col-xs-3">
<span class="link">Heatmap</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Basic<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Group-aware<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Auto Group<br>Identification</span>
</div></a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
(...)
I would replace that whole container-fluid with a navbar, but then I wouldn't be able to achieve the design as linked in: (demo). I tried adjusting the CSS parameters, but wasn't able to get the look and precise measurements.
我会用导航栏替换整个容器流体，但是我将无法实现链接中的设计：(demo)。我尝试调整 CSS 参数，但无法获得外观和精确测量值。
Any way to make the 2nd row collapsible on mobile, manually or otherwise, while preserving the design?
有什么方法可以在保留设计的同时，手动或以其他方式在移动设备上折叠第二行？
回答by KyleMit
Here's a slightly different idea. I like Macsupport's second navbar from your original design, but the toggle button on a second row on a mobile device doesn't make a lot of sense to me. Especially on mobile where space is limited. Having a hamburger button on the far right doesn't really detract from the logo at all.
这是一个稍微不同的想法。我喜欢 Macsupport 原始设计中的第二个导航栏，但移动设备第二行上的切换按钮对我来说没有多大意义。特别是在空间有限的移动设备上。在最右边有一个汉堡包按钮并没有真正减损徽标。
Here's a pretty standard navbar example, except I've added the class .twoRow
这是一个非常标准的导航栏示例，除了我添加了类 .twoRow
<div class="navbar navbar-inverse twoRow">
<div class="container">
<!-- Header -->
<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>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
For the CSS, on a widescreen device, just clear the .navbar-collapsefloat so it creates a new line:
对于 CSS，在宽屏设备上，只需清除.navbar-collapse浮动即可创建新行：
@media (min-width: 768px) {
.twoRow .navbar-collapse {
clear: left;
}
}
Working Demo in jsFiddle
jsFiddle 中的工作演示
Which will look like this:
看起来像这样：
回答by Macsupport
Here is a rough example:
这是一个粗略的例子：
/* CSS */
.nav2 {
margin-top: 50px;
}<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
<nav class="navbar navbar-inverse nav2" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
</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 class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>