플로트 부트 스트랩 navbar가 모바일에서 왼쪽으로, 데스크톱에서 오른쪽으로 연결됩니다.

Question

내 navbar는 모두 오른쪽으로 떠 다니는 4 개의 링크가 있습니다. 나는 그것을 작동시키기 위해서 .pull-right을 사용했다. 모바일에서는 모든 링크를 활성 링크를 제외하고는 왼쪽으로 이동하고 싶습니다. 내 활성 링크가 모든 기기에서 바로 사용되기를 바랍니다.

저는이 작업을 수행하는 가장 효율적인 방법을 찾고 있습니다. 부트 스트랩 내에 어떤 도움이되는 수업이 있나요? 아니면 모바일에 남아있는 3 개의 링크를 가져 오기위한 맞춤 수업을 만들어야합니까?

HTML

<!-- Fixed Navbar --> 
<nav class="navbar navbar-custom"> 
    <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle Navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button>  
     </div> <!-- end navbar-header --> 

     <div id="navbar" class="collapse navbar-collapse pull-right"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="about.html">About Summit</a></li> 
       <li><a href="contact.html">Contact Us</a></li> 
      </ul> 

      <ul class="nav navbar-nav"> 
       <li class="active"><a href="login.html">Client Login</a></li> 
      </ul> 
    </div><!--/.nav-collapse --> 

    </div> <!-- end container --> 
</nav> <!-- end navbar navbar-custom --> 

CSS

/*======= navbar ========*/ 
.navbar { 
    opacity: 0.95; 
    -webkit-opacity: 0.95; 
    -moz-opacity: 0.95; 
    filter: alpha(opacity=95); /* internet explorer */ 
} 

#navbar > ul.nav a:hover { 
    color: #50b948; /*TD Green*/ 
} 

.navbar-custom { 
    background-color: #f2f2f2; 
    font-family: 'Quicksand', sans-serif; 
    font-size: 1rem; /*14px*/ 
    text-transform: uppercase; 
    font-weight: 700; 
    border: none; 
} 
.navbar-custom .navbar-brand { 
    color: #777; 
} 
.navbar-custom .navbar-brand:hover, 
.navbar-custom .navbar-brand:focus { 
    color: #5e5e5e; 
    background-color: transparent; 
} 
.navbar-custom .navbar-text { 
    color: #777; 
} 
.navbar-custom .navbar-nav > li > a { 
    color: #777; 
} 
.navbar-custom .navbar-nav > li > a:hover, 
.navbar-custom .navbar-nav > li > a:focus { 
    color: #333; 
    background-color: transparent; 
} 
.navbar-custom .navbar-nav > .active > a { 
    background: #50b948; 
    color: #FAFAFA; 
} 

.navbar-custom .navbar-nav > .active > a:hover, 
.navbar-custom .navbar-nav > .active > a:focus { 
    background: #FAFAFA; 

    -webkit-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75); 
    -moz-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75); 
    box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75); 
} 

.navbar-custom .navbar-nav > .disabled > a, 
.navbar-custom .navbar-nav > .disabled > a:hover, 
.navbar-custom .navbar-nav > .disabled > a:focus { 
    color: #ccc; 
    background-color: transparent; 
} 
.navbar-custom .navbar-toggle { 
    border-color: #ccc; /*btn border-color*/ 
} 
.navbar-custom .navbar-toggle:hover, 
.navbar-custom .navbar-toggle:focus { 
    background-color: #ddd; /*btn color on hover*/ 
} 
.navbar-custom .navbar-toggle .icon-bar { 
    background-color: #888; 
} 
.navbar-custom .navbar-collapse, 
.navbar-custom .navbar-form { 
    border-color: #ccc; /*collapsed bottom border color*/ 
} 
.navbar-custom .navbar-nav > .open > a, 
.navbar-custom .navbar-nav > .open > a:hover, 
.navbar-custom .navbar-nav > .open > a:focus { 
    background-color: #e7e7e7; 
    color: #555; 
} 
@media (max-width: 767px) { 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a { 
     color: #777; 
} 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus { 
     color: #333; 
     background-color: transparent; 
} 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus { 
     color: #555; 
     background-color: #e7e7e7; 
} 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus { 
     color: #ccc; 
     background-color: transparent; 
    } 
} 
    .navbar-custom .navbar-link { 
    color: #777; 
} 
.navbar-custom .navbar-link:hover { 
    color: #333; 
} 
.navbar-custom .btn-link { 
    color: #777; 
} 
.navbar-custom .btn-link:hover, 
.navbar-custom .btn-link:focus { 
    color: #333; 
} 
.navbar-custom .btn-link[disabled]:hover, 
fieldset[disabled] .navbar-custom .btn-link:hover, 
.navbar-custom .btn-link[disabled]:focus, 
fieldset[disabled] .navbar-custom .btn-link:focus { 
    color: #ccc; 
} 

Answer 1

비결이 여기에 부트 스트랩이 이미 모바일과 비 모바일 용 추가 클래스를 활용하는 것입니다.

귀하의 사업부 :

navbar-collapse collapse

가되다는 :

navbar-collapse collapse in

다운 메뉴에서 슬라이드 이동에 오픈됩니다. 즉, CSS가 클래스 .navbar-collapse.in에 적용되는 경우 모바일의 열린 메뉴에만 적용됩니다.

.navbar-collapse.in { 
    float: left !important; 
} 

또한, (현재 사용할 수 있지만, 알파)에 부트 스트랩 버전 4.0은 아마도 바로이 목적을 위해, 클래스 .pull-xs-left 및 .pull-sm-right이 포함되어 있습니다.

Answer 2

'.navbar-right'를 사용하십시오. 데스크톱에서 탐색을 오른쪽으로 이동하도록 특별히 설계되었지만 모바일보기에서는 링크가 왼쪽으로 돌아갑니다.