2つの折りたたみメニューでナビゲーションバーを作成するにはどうすればよいですか？

Question

モバイルビューではコードが正常に動作していますが、デスクトップの右側にありますリンクがナビゲーションバーから外れています。私は、中央のブランド、左側の検索バー、右側のリンクでnavバーを作成しようとしています。そしてどのように左側にhambugerバーを移動し、モバイルビューの右側に検索...（申し訳ありませんが私の英語のため）

.navbar-brand { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
.navbar-toggle { 
 
    z-index:3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2"> 
 
     <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="#">Brand</a> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="glyphicon glyphicon-search" aria-hidden="true"> </span> 
 
     </button> 
 
    </div> 
 
     <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1"> 
 
    <form class="navbar-form navbar-left" role="search"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Search"> 
 
      </div> 
 
      <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
    </div> 
 
     <div class="collapse navbar-collapse" id="navbar-collapse-2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     </ul> 
 
    </div> 
 
</nav>

Answer 1

はmenu-1クラスを追加したり、button

に好きなことを呼び出すために

<button type="button" class="navbar-toggle menu-1" data-toggle="collapse" data-target="#navbar-collapse-2"> 

、あなたのCSSに以下を追加：

.menu-1 { 
float: left; 
margin-left: 10px; 
} 

更新：width: 100を削除して、このよう.navbar-brandためleftを増やし、検索の問題を処理するために：

.navbar-brand { 
    position: absolute; 
    /*width: 100%;*/ 
    left: 50%; 
    top: 0; 
    text-align: center; 
    margin: auto; 
} 

も、このCSSを追加します。

@media (max-width:767px){ 
    a.navbar-brand { 
     left: 45%; 
    } 
} 

が更新Jsfiddle

Answer 2

@media (max-width: 768px) { 
 
.nav_bar_align .navbar-brand{ 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
.nav_bar_align .nav_humber{ 
 
    float: left; 
 
    margin-left: 15px; 
 
    z-index: 1; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<nav class="navbar navbar-default navbar-fixed-top nav_bar_align" role="navigation"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle nav_humber" data-toggle="collapse" data-target="#navbar-collapse-2"> 
 
     <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="#">Brand</a> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"><span class="glyphicon glyphicon-search" aria-hidden="true"> </span> 
 
     </button> 
 
    </div> 
 
     <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1"> 
 
    <form class="navbar-form navbar-left" role="search"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Search"> 
 
      </div> 
 
      <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
    </div> 
 
     <div class="collapse navbar-collapse" id="navbar-collapse-2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     </ul> 
 
    </div> 
 
</nav>

をチェック