創建具有兩行的響應式Bootstrap導航欄

Question

我試圖創建一個響應式Bootstrap 3的兩行導航欄。但是，我遇到了HTML的結構和崩潰功能問題。

下面是對所需結果的可視化描述，我希望有人能指出我在HTML/CSS方面的正確方向（儘可能多地使用默認的Bootstrap功能）。

本質上菜單期望執行以下操作：

• 在片劑/桌面設備中，第一行是標識和的 小型二次鏈接（Link1-3）的菜單。第二行是 主鏈接（LinkA-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        | 
|--------------------------------------| 

Answer 1

如果我有你的項目的HTML/CSS我用它來告訴你應該怎麼做，但在這種情況下這個網站從static navbar example of Bootstrap v3.3.7

來到actualy的想法如下<div class="navbar-header">將<div id="navbar" class="navbar-collapse collapse">行與浮動和寬度它的100％的空間，然後拉起<ul class="nav navbar-nav navbar-right">與margin-top: -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> 

CSS

.navbar-collapse { 
    float: left; 
    width: 100%; 
    clear: both; 
} 

@media (min-width: 768px) { 
    .navbar-right { 
     margin-top: -50px; 
    } 
} 

JUST讓我知道它的工作與否。