bootstrap navbar nav-pills vertical @ 768px

Question

私は、一連のリンクがnav-pillsとして表示されているブートストラップnavbarを持っています。

錠剤はモバイルでは水平に正しく表示されますが、画面が768px以上になると、私は望ましくない縦型レイアウトにスワップします。

どこかで@ 768pxをトリガーするメディアクエリがあると思われますが、私はどこにいるのか分かりません。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 

    <!-- Title --> 
    <div class="navbar-header"> 
     <!-- Required bootstrap placeholder for the collapsed menu --> 

     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
       Dropdown 
       <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a> 
       </li> 
       <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a> 
       </li> 
       <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a> 
       </li> 
       <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a> 
       </li> 
       </ul> 
      </li> 

      <li> 
      <%= link_to search_path do %> 
       <i class="glyphicon glyphicon-search"></i><!-- Find --> 
      <% end %> 
      </li> 

      <li> 
      <a href="#" class="visible-xs visible-sm" data-toggle="collapse" data-target="#activity_parent"> 
       <i class="fa fa-list"></i> 
      </a> 
      </li>     
     </ul> 

    </div> 

    </div><!-- /.container-fluid --> 
</nav> 

編集 [OK]を、私は次のブートストラップメディアクエリが見つかりました：私は "NAV NAV-の丸薬" から "NAVナビゲーションバー-NAV" にナビゲーションバーのメニュー項目を変更した

@media (min-width: 768px) 
.navbar-nav { 
    float: left; 
    margin: 0; 
} 

@media (min-width: 768px) 
.navbar-nav > li { 
    float: left; 
} 

をし、スクリーンが768pxより小さくてもこれらの設定が残るように、次のCSSを追加しました。

.navbar-nav { 
    float: left; 
    margin: 0; 
} 

.navbar-nav > li { 
    float: left; 
} 

ここで、リンクは画面のサイズに関係なく水平に表示されます。私は今、新しい関連する問題を抱えています。

画面> 768pxドロップダウンが正しいになります

画面< 768pxドロップダウンが間違って検索する場合：

Answer 1

はこれを試してみてください、この5月はあなたを助けます。デモ

については

@media (max-width: 767px){ 
    .nav-pills>li { 
    float: none; 
    display: block; 
    } 
} 

ここcodepen demo link.