Twitter bootstrap 创建具有两行的响应引导导航栏

我正在尝试创建一个有两行的基于Bootstrap3的响应式导航栏。但是，我在HTML的结构和折叠功能方面遇到了问题

下面是所需结果的可视化描述，我希望有人能在HTML/CSS方面为我指明正确的方向（尽可能多地使用默认引导功能）

菜单基本上需要执行以下操作：

|----------------------------------------------------------|
|  LOGO/BRAND                         Link1  Link2  Link3  |
|----------------------------------------------------------|
|  LinkA  LinkB  LinkC  LindD  LinkE                       |
|----------------------------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|
|  LinkA                               |
|  LinkB                               |
|  LinkC                               |
|  LinkD                               |
|  LinkE                               |
|--------------------------------------|
|  Link1                               |
|  Link2                               |
|  Link3                               |
|--------------------------------------|

• 在平板电脑/桌面设备上，第一行是徽标和菜单 小型辅助链路（链路1-3）。第二行是主菜单，带有 主要链接（链接A-E）

• 在移动设备上，经典的折叠设计应该 与徽标和汉堡图标一起出现。扩展菜单应该 首先显示主链接（LinkA-E），然后显示次链接 （链接1-3）最后

平板电脑/桌面设备：

|----------------------------------------------------------|
|  LOGO/BRAND                         Link1  Link2  Link3  |
|----------------------------------------------------------|
|  LinkA  LinkB  LinkC  LindD  LinkE                       |
|----------------------------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|
|  LinkA                               |
|  LinkB                               |
|  LinkC                               |
|  LinkD                               |
|  LinkE                               |
|--------------------------------------|
|  Link1                               |
|  Link2                               |
|  Link3                               |
|--------------------------------------|

移动设备（折叠）：

|----------------------------------------------------------|
|  LOGO/BRAND                         Link1  Link2  Link3  |
|----------------------------------------------------------|
|  LinkA  LinkB  LinkC  LindD  LinkE                       |
|----------------------------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|
|  LinkA                               |
|  LinkB                               |
|  LinkC                               |
|  LinkD                               |
|  LinkE                               |
|--------------------------------------|
|  Link1                               |
|  Link2                               |
|  Link3                               |
|--------------------------------------|

移动设备（扩展）：

|----------------------------------------------------------|
|  LOGO/BRAND                         Link1  Link2  Link3  |
|----------------------------------------------------------|
|  LinkA  LinkB  LinkC  LindD  LinkE                       |
|----------------------------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|
|  LinkA                               |
|  LinkB                               |
|  LinkC                               |
|  LinkD                               |
|  LinkE                               |
|--------------------------------------|
|  Link1                               |
|  Link2                               |
|  Link3                               |
|--------------------------------------|

---

如果我对你的项目有一个html/css，我会用它来展示你应该如何做，但是在这个上下文中这个html来自

实际上，这个想法是将

放在

下面的一行中，浮动并将其100%的空间加宽，然后向上拉

，顶部留有

空白：-50px

有了这个媒体查询，我们就可以确定它在moblie设备中的行为是正确的

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>

只要告诉我它是否有效
 多谢各位！这完全符合要求：-）很高兴听到：）