Bootstrap 3 navbar-fixed-top bleiben in der mobilen Ansicht behoben

Question

Dies kann ein Fehler oder nur meine schlechte Codierung sein. Ich habe eine Website mit twitter Bootstrap 2.3. * Gebaut und festgestellt, kein Problem, vor allem für die reaktionsschnelle Funktion. Das Problem trat auf, als ich versuchte, in den Bootstrap 3.RC-2 zu wechseln, der die letzte stabile Version war (nach Wikipedia). Ich habe auch mit den Beispielen im Download versucht, und hatte das gleiche Ergebnis, als ich versuchte, das Ansichtsfenster zu vergrößern.

Schauen Sie sich bitte http://bootply.com/69863 für das Beispiel an und versuchen Sie, die Größe des Fensterbrowsers zu ändern, klicken Sie auf Renderansicht und versuchen Sie, das Menü zu erweitern und die Seite zu scrollen.

Meine wirkliche Frage ist, wie mache ich die feste Navbar statisch, wenn sie in der beweglichen (zusammendrückbaren) Ansicht ist?

Answer 1

.navbar-fixed-top hält die navbar fest oben für alle Bildschirmgrößen jetzt. Dies wird die Standardeinstellung sein. Wenn Sie sich navbar.less ansehen, werden Sie feststellen, dass auch für diese Klasse keine Medienabfragen angewendet werden.

Um die navbar statisch zu machen nach dem Zusammenbruch der CSS hinzufügen unten gezeigt nach dem Bootstrap CSS:

@media (max-width: 767px) /* @grid-float-breakpoint -1 */ 
{ 
    .navbar-fixed-top 
    { 
    position: relative; 
    top: auto; 
    } 
} 

Answer 2

Zusätzlich zu dem, was Bass Jobsen erwähnt, für eine bessere Nutzbarkeit auf mobiles, entfernt der folgenden CSS-Schnipsel des „sub-Scrolling“ in der Navigationsleiste und entfernt den oberen Rand, die aufgrund der großen Bildschirm fixiert navbar ist:

@media (max-width: 767px) { 
    .navbar-fixed-top { 
     position: relative; 
     top: auto; 
    } 
    .navbar-collapse { 
     max-height: none; 
    } 
    body { 
     margin: 0; 
    } 
} 

Answer 3

@media (max-width: 767px){ 

    .navbar-fixed-top { 
     position: relative; 
     top: auto;/* Auto position navbar top */ 
    } 

    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { 
     max-height:inherit;/* Clear max-height */ 
    } 

    body{ 
     padding:0px;/* No padding */ 
    } 
}