如何用2個摺疊菜單創建導航欄？

Question

我的代碼在移動視圖上工作正常，但在桌面右側鏈接正在走出導航欄。我試圖在品牌中心創建導航欄，左側搜索欄和右側鏈接。如何移動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，增加left爲.navbar-brand這樣的：

.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>