수평 정렬 메뉴 바 요소 - <strong>BRAND</strong> (중심) - - <strong>검색</strong> 3

Question

부트 스트랩 나는 요소

메뉴 (버튼)의 순서를 다음과 같이 대답하는 뷰의 네비게이션 바을 표시 할 (아이콘) - 로그인 (아이콘)

나는 그것을 끝낼 수있는 방법이 많이 있지만 성공을 노력했다. 현재 그들은 모바일 해상도에서 볼 때 3 행으로 나옵니다. 여기

데스크탑 뷰 > bootply

의 코드이며, 요소는 필요한 순서에 따라 정렬된다.

모바일보기를 위해 지정된 순서대로 모두 정렬 할 수 있습니까?

Answer 1

사용이 :

@media screen and (max-width: 768px) { 
    .row { 
     position: relative; 
    } 

    .navbar-header { 
     left: 0; 
     position: absolute; 
     top: 0; 
    } 

    .navbar-brand { 
     float: none; 
     box-sizing: border-box; 
     height: 50px; 
     padding: 14px 50px; 
     text-align: center; 
     width: 100%; 
    } 

    .navbar-right { 
     margin: 0; 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 

    .navbar-right > li { 
     display: inline-block; 
     margin-top: 4px; 
    } 
} 

데모 : http://www.bootply.com/125720