携帯電話用のNavBar調整レールとブートストラップ

Question

私はモバイルデバイス上でナビゲーションバーの内容をどのように崩壊させることができるのだろうかと思っていたので、ホームリンクをクリックした後、ドロップダウンして他のすべてのリンクを表示する3つのダッシュがありました。ここに私の_navigation.html.erbファイルです：私は私のデスクトップウィンドウのサイズを変更すると作品を達成しようとしている何

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <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> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav nav-pills"> 
     <li><%= link_to "Home", root_path %></li></a> 
     <li><%= link_to "About Me", about_path, target: :_blank %></li> 

     <li class="dropdown"> 
      <a href ="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="logo">Music<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a target="_blank" href="https://soundcloud.com/officialyungdremusic">Soundcloud</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href ="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="logo">Social Media<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a target="_blank" href="https://www.youtube.com/user/OfficialYungDreMusic">Youtube</a></li> 
      <li><a target="_blank" href="https://twitter.com/yungdremusic">Twitter</a></li> 
     </ul> 
     <li><%= link_to "Pictures", pictures_path, target: :_blank %></li> 
     <li><%= link_to "Contact Me", contact_path, target: :_blank%></li> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container--> 
</nav> 

。しかし、何らかの理由で電話（720x1280ピクセル）でサイズが変更されません。私はCSSのメディアクエリに精通していますが、私はちょうど720以上の画面のためだけの別のメディアクエリが必要でしょうか？

ご協力いただきありがとうございます。

Answer 1

ブートストラップnavbarのデフォルトブレークポイントは768pxです。私はあなたの例を再現しようとしましたが、それは768px以下で崩壊します。ただし、画面サイズが768px以上のタブレットがあります。タブレットは折りたたまれません。独自のメディアクエリを作成するか、ブートストラップ変数@grid-float-breakpointのデフォルト値を変更する必要があります。

詳細については、ブートストラップガイドのChanging the collapsed mobile navbar breakpointを確認してください。