bootstrap - navbar - 交換品牌和切換

Question

如果視口足夠小，我想在移動視圖中切換品牌和切換按鈕。在桌面視口上，品牌圖標應位於右側，鏈接應正常顯示。

例子：

桌面：

+--------------------------------------------+ 
|Link1 Link2   BrandIcon1 BrandIcon2 | 
+--------------------------------------------+ 

手機：

+----------------------------+ 
|[=] BrandIcon1 BrandIcon2 | 
+----------------------------+ 

什麼是實現代碼的最簡單和乾淨的方式？

發了筆：http://codepen.io/Kaito23/pen/Wxmxgm

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.navbar-toggle { 
 
    float:left; 
 
} 
 
.navbar-brand { 
 
    float: right; 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     </ul> 
 
     
 
     <ul class="visible-xs visible-xs visible-sm visible-md visible-lg nav navbar-nav navbar-right"> 
 
     <li><a href="#"><img src="http://images.fatcow.com/icons/32/wordpress.png" /></a></li> 
 
     <li><a href="#"><img src="http://www.wbdesignideas.com/images_drf_color.png" /></a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

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

目前的問題是，當圖標在導航欄崩潰類，他們disapear。如果我將它們置於摺疊格下，則它們位於 新行中。

在此先感謝

問候
怪盜

Answer 1

1. 讓我們引導的default navbar並刪除不需要的部分。
2. 然後改變浮標相反的方向。
3. 並添加第二個品牌之前第一個。 （這是因爲float: right;財產。）

請檢查結果：http://codepen.io/glebkema/pen/PzLbmz

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
@media (min-width: 768px) { 
 
    .navbar-header { 
 
    float: right; 
 
    } 
 
} 
 
.navbar-brand { 
 
    float: right; 
 
} 
 
.navbar-toggle { 
 
    float: left; 
 
    margin-left: 15px; 
 
    margin-right: 0; 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"> 
 
     <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 2</a> 
 
     <a class="navbar-brand" href="#">Brand 1</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Left 1</a></li> 
 
     <li><a href="#">Left 2</a></li> 
 
     <li><a href="#">Left 3</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

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