ブートストラップ応答ナビバー

Question

応答性に関して、ブートストラップナビバーに問題があります。 私のナビバーにdata-spy="affix"を使用して、スクロール中に上部が固定されていることを確認してください。 ただし、ウィンドウをモバイルディメンションにリサイズすると問題が発生します。 モバイルディメンションにリサイズすると、ナビゲーションバーの右部分が範囲外に表示されます。ナビゲーションバーが画面に対して広すぎるため、コンテンツが表示されません。ただし、スクロールしてaffixのエフェクトが引き継がれると、ナビゲーションバーがモバイル画面に拡大され、画面外に出ていたコンテンツがモバイル画面に完全に合わせられ、ナビゲータ全体が反応します。ここで

は、ナビゲーションバーのための私のHTMLコードです：

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0"> 
     <div class="navbar-header"> 
      <div class="navbar-brand"> 
       <a href="#">Title</a> 
      </div> 
     </div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Page1</a></li> 
       <li><a href="#">Page2</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Shop</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-shopping-cart badge">5</span></a></li> 
      </ul> 
     </div> 
    </nav> 

そして、これは私の関連するCSSコードです：

body { 
    font-size:large; 
} 

.glyphicon{ 
    font-size: 95%; 
} 
.affix { 
    top:0px; 
    width:100%; 
    z-index:99999; 
} 
.affix + .container-fluid { 
    padding-top: 6.801%; 
} 
.navbar-header{ 
    margin-left: 5% !important; 
} 
.navbar{ 
    width:100% !important; 
    background-image:none; 
    background-color:black; 
} 
.navbar div a{ 
    line-height:80px; 
} 

もJSFiddleを作成しました。

Answer 1

jsfiddleでコードを更新しました。あなたは今、確認してください、とあなたが得るいけない場合、それはあなたのナビゲーションバー、ヘッダにブートストラップのボタンを追加し、私は、CSSコードを持つことができますあなたが望むすべてがに固定ナビゲーションバーがある場合

@media (max-width:767px){ 
 
.navbar div a { 
 
    line-height: 20px; 
 
} 
 
.affix-top .collapse { 
 
    display:block !important; 
 
} 
 
    
 
    
 
}