2016-07-18 23 views
1

応答性に関して、ブートストラップナビバーに問題があります。 私のナビバーに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を作成しました。

+1

用常に上に 'navbar-fixed-top'クラスを追加するだけです。 –

+0

これは実際にトリックでした。どうすれば 'data-spy =" affix "'になったのか分かりません。だから馬鹿だ。これを回答として投稿できますか? –

答えて

0

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

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