twitter-bootstrap 创建具有两行的响应式 Bootstrap 导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41301318/
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
Create responsive Bootstrap navbar with two rows
提问by preyz
I am trying to create a responsive Bootstrap 3 based navbar with two rows. However, I am having trouble with the structure of the HTML and the collapse functionality.
我正在尝试创建一个具有两行的基于 Bootstrap 3 的响应式导航栏。但是，我在 HTML 的结构和折叠功能方面遇到了问题。
Below is a visual description of the desired result, and I was hoping someone could point me in the right direction in terms of HTML/CSS (with as much default Bootstrap functionality as possible).
下面是所需结果的视觉描述，我希望有人能在 HTML/CSS 方面为我指出正确的方向（尽可能多地使用默认的 Bootstrap 功能）。
Essentially the menu is desired to do the following:
本质上，菜单需要执行以下操作：
On tablet/desktop devices, the first row is the logo and a menu of small secondary links (Link1-3). The second row is the main menu with main links (LinkA-E).
On mobile, the classic collapse design should appear with the logo and hamburger icon. The expanded menu should show the main links (LinkA-E) first, and then the secondary links (Link1-3) last.
在平板电脑/桌面设备上，第一行是徽标和小型辅助链接菜单 (Link1-3)。第二行是带有主链接的主菜单（LinkA-E）。
在移动设备上，经典的折叠设计应该带有徽标和汉堡包图标。展开的菜单应首先显示主链接 (LinkA-E)，然后显示次要链接 (Link1-3)。
Tablet/Desktop device:
平板电脑/桌面设备：
|----------------------------------------------------------|
| LOGO/BRAND Link1 Link2 Link3 |
|----------------------------------------------------------|
| LinkA LinkB LinkC LindD LinkE |
|----------------------------------------------------------|
Mobile device (collapsed):
移动设备（折叠）：
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|
Mobile device (expanded):
移动设备（扩展）：
|--------------------------------------|
| LOGO/BRAND HAMBURGER |
|--------------------------------------|
| LinkA |
| LinkB |
| LinkC |
| LinkD |
| LinkE |
|--------------------------------------|
| Link1 |
| Link2 |
| Link3 |
|--------------------------------------|
采纳答案by mohamad faramarzi
If i had an html/css of your project i use it to show how you should do that, but in this context THIS HTMLcame from static navbar example of Bootstrap v3.3.7
如果我有你项目的 html/css，我用它来展示你应该如何做，但在这种情况下，这个 HTML来自Bootstrap v3.3.7 的静态导航栏示例
actualy the idea is placing <div id="navbar" class="navbar-collapse collapse">in row below <div class="navbar-header">with floating and width it 100% of its space, then pulling up <ul class="nav navbar-nav navbar-right">with margin-top: -50px;
实际上，这个想法是放在<div id="navbar" class="navbar-collapse collapse">下面的行中<div class="navbar-header">，浮动并使其宽度达到其空间的 100%，然后<ul class="nav navbar-nav navbar-right">用margin-top: -50px;
With that media query we would sure it behave right in moblie device.
使用该媒体查询，我们将确保它在移动设备中表现正确。
HTML
HTML
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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="#">Logo/Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">LinkA</a></li>
<li><a href="#">LinkB</a></li>
<li><a href="#">LinkC</a></li>
<li><a href="#">LinkD</a></li>
<li><a href="#">LinkE</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS
CSS
.navbar-collapse {
float: left;
width: 100%;
clear: both;
}
@media (min-width: 768px) {
.navbar-right {
margin-top: -50px;
}
}
JUSTLet me know if it worked or not.
只是让我知道它是否有效。
