ブートストラップのnavbarが2つのハンバーガーメニューに崩壊する

Question

私はブートストラップnavbarをよく試してみましたが、私が探しているものを得ることができませんでした。

大画面では、たくさんのコンテンツを持つ素晴らしいナビゲーションバーを作成できます。 中規模の画面では、そのコンテンツの一部を「一般的なメニュー」にして残りを実質的に変更しないでください。 小さな画面では、残りの部分を他のハンバーガーに倒したり、検索アイコンを表示して、上部のバーに2つの折りたたみ可能なメニューが残っています。 イメージを使ってモックアップを試みました。

Navbar on large display

Navbar on small display

さらに良い小さな画面上のメニューが画面幅の約70％をカバーする代わりに、アニメーションから、右からそれぞれ、左からアニメーションかどうなるであろう100％幅のトップカバー。

Answer 1

デモ添付されています：隠されたxsまたはvisible-lgまたはvisible-smクラスのブートストラップを使って試しました。小さなデバイスではほとんどセクションがレンダリングされず、大きなデバイスでレンダリングされるセクションはほとんどありません。それに応じてコードをどのように修正できるかについて説明します。

セクションをいくつでも追加して、クラスをhidden-xsまたはvisible-lgまたはvisible-smとして使用するデバイスに応じて表示することができます。また、ブートストラップの公式サイトで詳細を確認することもできます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-default"> 
 
     <div class="container-fluid bg-info"> 
 
      <div class="navbar-header"> 
 
       <!--Visible on mobile device only--> 
 
       <a class="navbar-brand bg-info visible-xs pull-right" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" title="App Setting"> 
 
        <span class="glyphicon glyphicon-align-justify" style="cursor:default"></span> 
 
       </a> 
 

 
       <!--Visible on mobile device only--> 
 
       
 
        <a class="visible-xs btn navbar-brand pull-right" data-toggle="modal" href="#searchModal"> 
 
         <span class="glyphicon glyphicon-search"></span> 
 
        </a> 
 
       
 

 
       <a class="navbar-brand bg-success" style="padding-right:5px;padding-left:2px;"> 
 
        <span class="glyphicon glyphicon-home"></span> APP Name 
 
       </a> 
 

 
     
 
        
 
       
 

 

 
       
 

 
       <!--Hidden on mobile device only--> 
 
        <form action = "" method="get" role="search" class="hidden-xs navbar-form navbar-left"> 
 
         <div class="input-group"> 
 
          <input type = "search" class="form-control" name="id" placeholder="Search.."> 
 
          <span class="input-group-btn"> 
 
           <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
 
          </span> 
 
         </div><!-- /input-group --> 
 
        </form> 
 

 
       
 
      </div> 
 

 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 

 
       <ul class="nav navbar-nav navbar-right"> 
 
        
 
         <li class="dropdown"> 
 
          <a href = "#" class="dropdown-toggle" data-toggle="dropdown"> 
 
           <span class="glyphicon glyphicon-user"></span> 
 
           Name<span class="caret"></span> 
 
          </a> 
 
          <ul class="dropdown-menu" role="menu"> 
 
           <li> 
 
            <a href = "" > 
 
             <span class="glyphicon glyAP glyphicon-log-out"></span> Sign out 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href = "" ><span class="glyphicon glyphicon-wrench"></span> Change Password</a> 
 
            </li> 
 
          </ul> 
 
         </li> 
 
        
 
        <li class="dropdown"> 
 
         <a href = "#" class="dropdown-toggle" data-toggle="dropdown"> 
 
          <span class="glyphicon glyphicon-cog"></span> 
 
          <!--Visible on mobile device only--> 
 
          <span class="visible-xs-inline-block">Tools</span> 
 
         </a> 
 
         <ul class="dropdown-menu" role="menu"> 
 
          <li><a href = ""><span class="glyphicon glyphicon-stats"></span> kkk</a></li> 
 
          <li><a href = "" target="trace"><span class="glyphicon glyphicon-record"></span> dffd</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
    <!--Visible on mobile device only--> 
 
    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-hidden="true"> 
 
     <form action = "" method="get" role="search"> 
 
      <div class="iput-group input-group-lg" style="margin-top:20px;margin-left:10px;margin-right:10px;"> 
 
       <input type = "search" class="form-control" name="id" placeholder="Search....."> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
 
       </span> 
 
      </div><!-- /input-group --> 
 
     </form> 
 
    </div>