フロートブートストラップnavbarは、モバイルでは左に、デスクトップでは右にリンク

Question

私のnavbarはすべて4つのリンクがすべて右に浮いています。私はそれを動作させるために.pull-rightを使用しました。モバイルでは、すべてのリンクをアクティブリンクを除いて左に移動したいと思います。アクティブなリンクをすべての端末で正しく使用したい

私はこれを行う最も効率的な方法を見つけようとしています。 Bootstrap内にこれを手助けするクラスがありますか、またはモバイル上に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

トリックはここにブートストラップはすでにモバイルと非モバイル用の追加クラスを利用するようになります。

あなたのdiv：

navbar-collapse collapse

は次のようになりますダウンメニューのスライドを携帯で開かれ

navbar-collapse collapse in

。これは、CSSがクラス.navbar-collapse.inに適用される場合、モバイル上の開いているメニューにのみ適用されることを意味します。

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

また、ブートストラップV4.0は、（現在は使用可能ですが、アルファで）おそらくまさにこの目的のために、クラス.pull-xs-leftと.pull-sm-rightが含まれています。

Answer 2

「.navbar-right」を使用してください。デスクトップ上でナビゲーションを右に移動するように特に設計されていますが、モバイルビューではリンクを左に戻します。