부트 스트랩 - navbar - 브랜드 및 토글 교환

Question

뷰포트가 충분히 작 으면 모바일보기에서 상표 및 토글 버튼을 전환하고 싶습니다. 데스크탑 뷰포트에서 브랜드 아이콘이 오른쪽에 있고 링크가 정상적으로 표시되어야합니다.

예 :

데스크톱 :

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

모바일 :

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

이 코드를 가장 쉽고 가장 깨끗한 방법은 무엇입니까?

는 펜 제작 :

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

http://codepen.io/Kaito23/pen/Wxmxgm는 현재 문제가 아이콘 네비게이션 바에 붕괴 클래스에있을 때 그들이 사라지는 것입니다. 접어서 div에 넣으면 새 행에 있습니다. 사전에

감사

인사말
신의 괴도 잔

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>