2行のレスポンスブートストラップnavbarを作成する

Question

2つの行を持つレスポンスブートストラップ3ベースのnavbarを作成しようとしています。しかし、HTMLの構造と折りたたみ機能に問題があります。

以下は、望ましい結果の視覚的説明です。私は誰かがHTML/CSS（可能な限り多くのデフォルトのブートストラップ機能を備えています）に関して正しい方向に向けることを期待していました。

本質的メニューは次の手順を実行することが望まれる。タブレット/デスクトップデバイスで

• 、最初の行は、ロゴと 小さな二次リンク（Link1-3）のメニューです。 2番目の行は、 メインリンク（LinkA-E）のメインメニューです。

• モバイルでは、古典的な崩壊のデザインは、ロゴとハンバーガーのアイコンで表示されます 。展開されたメニューは、最初にメインリンク（LinkA-E）を表示してから （Link1-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

から来たこのHTMLにactualyアイデアは<div class="navbar-header">下の行に<div id="navbar" class="navbar-collapse collapse">を置いています浮動小数点でスペースの100％を引き上げてを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それが働いていたかいないなら、私に教えてください。