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>