bootstrap responsive navbar

Question

Ich habe ein Problem mit bootstrap navbar in Bezug auf die Reaktionsfähigkeit. Ich habe data-spy="affix" auf meiner Navbar verwendet, um sicherzustellen, dass es beim Scrollen nach oben fixiert bleibt und es funktioniert perfekt. Das Problem ist jedoch, wenn ich die Größe des Fensters auf mobile Dimension. Wenn ich die Größe des Mobilgeräts ändere, erscheint der rechte Teil meiner Navigationsleiste außerhalb der Grenzen. Bedeutung Ich kann den Inhalt nicht sehen, da meine Navigationsleiste zu breit für den Bildschirm ist. Wenn ich jedoch nach unten scrolle und der Effekt affix übernimmt, skaliert meine Navigationsleiste auf den mobilen Bildschirm und der Inhalt, der den Bildschirm verlassen hat, wird perfekt auf den mobilen Bildschirm ausgerichtet und die gesamte Navigationsleiste reagiert darauf.

Hier ist mein HTML-Code für navbar:

<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> 

Und das ist mein relevanter CSS-Code:

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; 
} 

auch ein JSFiddle erstellt.

Answer 1

Ich habe Ihre Codes in jsfiddle aktualisiert. können Sie bitte jetzt überprüfen, und wenn Sie hinzufügen, dass Bootstrap-Schaltfläche, um Ihre navbar-Header, und ich habe für Sie

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