Bootstrap 3-fixed-top fixed fixed w widoku mobilnym

Question

To może być błąd lub po prostu złe kodowanie. Zbudowałem witrynę internetową za pomocą programu Twitter bootstrap 2.3. * I nie stanowiło to problemu, szczególnie w przypadku funkcji responsywnej. Problem pojawił się, gdy próbowałem przejść na wersję 3.RC-2 programu bootstrap, która była najnowszą stabilną wersją (zgodnie z Wikipedia). Próbowałem również z przykładami zawartymi w pobranym pliku, i miałem taki sam wynik, gdy próbowałem zmienić rozmiar okna roboczego.

Proszę spojrzeć na przykład na http://bootply.com/69863 i spróbuj zmienić rozmiar okna przeglądarki, a następnie kliknij render widoku i spróbuj rozwinąć menu i przewiń stronę.

Moje prawdziwe pytanie brzmi: jak ustawić stały navbar w widoku mobilnym (zwijanym)?

Answer 1

.navbar-fixed-top utrzymuje stały wierzchołek nawigacji dla wszystkich rozmiarów ekranu. To będzie domyślne. Kiedy spojrzysz na navbar.less zobaczysz, że nie są stosowane żadne zapytania o media w tej klasie.

Aby uczynić navbar statyczne po upadku dodać css pokazany poniżej po Boostrap CSS:

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

Answer 2

Dodatkowo, co Bass Jobsen wspomniał, dla lepszej użyteczności komórkowy, następujące CSS fragment usuwa „sub-scrolling” na pasku nawigacyjnym i usuwa górny margines, który jest tam ze względu na duży ekran stałej paska nawigacyjnego:

@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 */ 
    } 
}