twitter bootstrap pasek nawigacji naprawiono nakładającą się stronę

347

Korzystam z bootstrap na mojej stronie i mam problemy ze stałym paskiem nawigacyjnym. Kiedy używam zwykłego paska nawigacyjnego, wszystko jest w porządku. Jednak gdy próbuję zmienić go na stały pasek nawigacyjny, cała inna zawartość witryny przesuwa się w górę, tak jakby paska nawigacyjnego nie było, a pasek nawigacyjny nakłada się na niego. oto w zasadzie jak to ułożyłem:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

Próbowałem dokładnie skopiować przykłady bootstraps, ale ten problem nadal występuje tylko wtedy, gdy korzystam z paska nawigacyjnego naprawionego u góry. Co ja robię źle?

html twitter-bootstrap Matthew Berman
źródło

527

Twoja odpowiedź jest w dokumentach :

Wymagana wyściółka ciała

Naprawiony pasek nawigacyjny będzie nakładał inne treści, chyba że dodasz paddingje u góry <body>. Wypróbuj własne wartości lub skorzystaj z naszego fragmentu poniżej. Wskazówka: domyślnie pasek nawigacyjny ma wysokość 50 pikseli.
body { padding-top: 70px; }
Pamiętaj, aby dołączyć to po głównym CSS Bootstrap.

oraz w dokumentach Bootstrap 4 ...

Naprawiono użycie pozycji pasków nawigacyjnych: naprawiono, co oznacza, że są wyciągane z normalnego przepływu DOM i mogą wymagać niestandardowego CSS (np. Pad-top na), aby zapobiec nakładaniu się na inne elementy.

rfunduk
źródło

16

Ale kiedy minimalizujesz okno, pasek nawigacyjny pojawia się po 40px, jak mam go obsługiwać.

Aravindhan

5

Pojawia się po 40px prawdopodobnie dlatego, że „nie dodajesz tego po podstawowym CSS Bootstrap i przed opcjonalnym responsywnym CSS”.

collimarco

1

Ta odpowiedź jest prawdziwa, ale działa dobrze tylko wtedy, gdy wypełnienie 40px jest responsywnym stylem, zobacz odpowiedź Dana lub Nicka.

Tony Bathgate

1

Zobacz odpowiedź z @ qub1n, jeśli nie chcesz dodawać wypełnienia (lub czegokolwiek innego).

scharfmn

2

@JerSchneid Przykład navbar-fixed-top na w3schools.com pokazuje to samo zachowanie. Jestem skłonny nazwać to błędem.

Tony Martin

125

Jak inni stwierdzili, dodanie wyściółki do ciała działa świetnie. Ale kiedy zwężasz ekran (do szerokości telefonu komórkowego), pomiędzy paskiem nawigacyjnym a ciałem jest przerwa. Ponadto zatłoczony pasek nawigacyjny może zawijać się do paska wieloliniowego, zastępując ponownie część zawartości.

To rozwiązało dla mnie tego rodzaju problemy

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

Powoduje to domyślnie wypełnienie o wielkości 40 pikseli i 0 pikseli przy szerokości poniżej 768 pikseli (co zgodnie z dokumentami bootstrap to odcięcie układu telefonu komórkowego, w którym utworzona zostanie przerwa)

Nick Bisby
źródło

1

Czy to rozwiązanie obejmuje także podstawowy CSS Bootstrap i responsywny import CSS? Nadal widzę lukę, gdy szerokość okna jest mniejsza niż 980. Domyślam się, że późniejszy import responsywnych CSS zastępuje. Jeśli przeniosę to rozwiązanie w ramach responsywnego importu CSS, nadal otrzymuję wypełnienie nadwozia oraz dodatkową linię na pasku menu.

slothbear

Używam Twitter Bootstrap 2.3.2. Zauważyłem, że dokument nie zawiera już sugestii 40 pikseli, choć potrzeba nadal istnieje.

slothbear

1

Echa, sugestia 40 pikseli wciąż tam jest, po prostu się zmieniła. Przepraszamy za komentarz spam.

slothbear

3

przez Bootstrap 3. + body { padding-top: 40px; }wystarczy

andilabs

8

To rozwiązanie jest na dobrej drodze. Po prostu umieszczenie wypełnienia w ciele, jak udokumentowano, nie wystarczy, nawet na 3. +. Odpowiednia kombinacja zapytań o media pozwala uzyskać pożądany efekt, gdy pasek nawigacyjny owija się przy zmianie rozmiaru przeglądarki. W moim przypadku muszę zmienić wypełnienie przy szerokościach 1148px, 900px i 768px.

John McCann,

34

o wiele bardziej przydatne rozwiązanie w celach informacyjnych, działa idealnie we wszystkich moich projektach:

zmień swój pierwszy wiersz z

.navbar.navbar-fixed-top

do

.navbar.navbar-default.navbar-static-top

catsky
źródło

1

po prostu trollujesz? czy coś nadzorowałem?

chyno

Jak to uzyskało 10 głosów pozytywnych? domyślny pasek nawigacji dodaje tylko kolor i kolor tła ...

Denny Mueller

2

navbar-static-top to zmiana, która zadziałała dla mnie. Dzięki!

kevthanewversi

1

navbar-static-top naprawił to również dla mnie. Najmniej inwazyjne.

xpagesbeast

3

Działa to, jeśli nie potrzebujesz, aby pasek nawigacyjny był zawsze widoczny na górze ekranu. Pasek nawigacyjny-static-top nie jest stały, przewija się wraz z ekranem. Jest to przykład różnych stylów paska nawigacyjnego: getbootstrap.com/docs/3.3/examples/navbar-static-top

Victor Ionescu

26

Ten problem jest znany i istnieje obejście tego problemu w serwisie startowym Twittera:

Po zamocowaniu paska nawigacyjnego pamiętaj o uwzględnieniu ukrytego obszaru poniżej. Dodaj co najmniej 40 pikseli wypełnienia do <body>. Pamiętaj, aby dodać to po głównym CSS Bootstrap i przed opcjonalnym responsywnym CSS.

To działało dla mnie:

body { padding-top: 40px; }

Davididrac
źródło

9

Ale kiedy minimalizujesz okno, pasek nawigacyjny pojawia się po 40px, jak mam go obsługiwać.

Aravindhan

1

tak, to rozwiązanie nie działa dobrze na ekranach mobilnych. W rzeczywistości w trybie szerokoekranowym na moim telefonie strona w zasadzie czyni ją bezużyteczną.

Tony Bathgate

jaki opcjonalny responsywny CSS? Używałem tylko jednego (podstawowego) kodu ładującego CSS - mówię powyżej wersji 3.7.x W GÓRĘ; czy był podzielony na różne CSS przed wersją 3.7.x?

joedotnot

26

@ Ryan, masz rację, twarde kodowanie wysokości sprawi, że będzie działać źle w przypadku niestandardowych pasków nawigacyjnych. Oto kod, z którego korzystam szczęśliwie dla BS 3.0.0:

$(window).resize(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);         
});

Aram Paronikyan
źródło

3

Zamiast używać parseIntwartości css wysokości, właśnie użyłem $('#main-navbar').height(), ale poza tym było to bardzo pomocne i rozwiązało mój problem, dziękuję.

tylerwal

O ile pasek nawigacji nie ma stałej wysokości, właśnie tego potrzebujesz.

CraigP,

21

Stawiam to przed pojemnikiem z plonem:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

Podoba mi się to podejście, ponieważ dokumentuje włamanie potrzebne do jego działania, a także działa w przypadku mobilnej nawigacji.

EDYCJA - działa to znacznie lepiej:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

Dan
źródło

16

Problem polega na tym, że pasek nawigacyjny jest przymocowany do góry, który nakłada się na zawartość, chyba że określono dopełnienie body. Żadne z podanych tutaj rozwiązań nie działa w 100% przypadkach. Rozwiązanie JQuery miga / przesuwa stronę po załadowaniu strony, co wygląda dziwnie.

Prawdziwym rozwiązaniem dla mnie nie jest użycie navbar-fixed-top, ale navbar-static-top.

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>

Tomas Kubes
źródło

1

Tak, to lepiej, ponieważ wypełnienie korpusu jest dynamiczne dla każdego rozmiaru ekranu, ich rozwiązanie nie jest dobre.

Ronen Festinger

Ale nad paskiem nawigacyjnym jest pasek pustej białej przestrzeni.

user2075599

16

Jak napisałem w podobnym pytaniu, odniosłem duży sukces, tworząc fałszywy, nie naprawiony pasek nawigacyjny tuż przed moim prawdziwym stałym paskiem nawigacyjnym.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

Odstępy sprawdzają się doskonale na wszystkich rozmiarach ekranu.

Jason Butler
źródło

To jest to, co robimy ... umieszcza zawartość ciała we właściwym miejscu, bez kodu js, zgadywania lub czegokolwiek. .

FredArters,

1

To zasługuje na znacznie więcej entuzjastów, działa idealnie, jest brzydkie jak diabli, ale tylko kod: D

JRsz

Dzięki, jest to znacznie bardziej eleganckie rozwiązanie niż górne dopełnienie lub marginesy i tym podobne ...

Pedro Reis

3

Niestety nie działa to na urządzeniach mobilnych, gdy nawigacje trafiają do 1 kolumny.

Pedro Reis,

16

Rozwiązanie dla Bootstrap 4, działa idealnie we wszystkich moich projektach:

zmień swój pierwszy wiersz z

navbar-fixed-top

do

sticky-top

Dokumentacja bootstrapu

O czasie zrobili to dobrze: D

Stóg
źródło

Niektóre osoby mogą używać fixed-top, aby zobaczyć linki podczas przewijania strony; chociaż ta funkcja może być przydatna, jeśli nie przejmujesz się tym :)

Knowledge_is_power

Zauważ też, że .sticky-top używa position: sticky, co nie jest w pełni obsługiwane w każdej przeglądarce.

live-love

14

Wszystkie poprzednie rozwiązania kodują 40 pikseli na stałe w HTML lub CSS w taki czy inny sposób. Co się stanie, jeśli pasek nawigacyjny zawiera inny rozmiar czcionki lub obraz? Co zrobić, jeśli mam dobry powód, aby nie zadzierać z wyściółką ciała ? Szukałem rozwiązania tego problemu i oto, co wymyśliłem:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

Możesz go przesuwać w górę lub w dół, dostosowując „1”. Wydaje mi się, że działa dla mnie niezależnie od rozmiaru zawartości paska nawigacyjnego, przed i po zmianie rozmiaru.

Jestem ciekaw, co myślą o tym inni: podziel się swoimi przemyśleniami. (Zostanie to zrefaktoryzowane, aby się nie powtarzało, btw.) Czy oprócz używania jQuery istnieją jeszcze inne powody, aby nie podejść do problemu w ten sposób? Mam go nawet z dodatkowym paskiem nawigacyjnym, takim jak ten:

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: Powyżej znajduje się na Bootstrap 2.3.2 - czy będzie działał w wersji 3.x Dopóki ogólne nazwy klas pozostaną ... w rzeczywistości powinno działać niezależnie od bootstrap, prawda?

EDYCJA: Oto pełna funkcja jquery, która obsługuje dwa skumulowane, responsywne stałe paski nawigacyjne o dynamicznym rozmiarze. Wymaga 3 klas HTML (lub mógłby użyć identyfikatorów): user-top, admin-top i contentwrap:

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});

Ryan
źródło

Po prostu korzystam z tego i działa świetnie, ale z jakiegoś dziwnego powodu, jeśli mam dwa paski nawigacyjne, jeden normalny rozmiar i jeden dla małych ekranów, działa tylko na większym?

NaughtySquid

@LiamDawe może na stronie jest więcej niż jeden „.serser top” (na przykład), w którym to przypadku .height () może się pomylić…?

Ryan

14

Po prostu zmień za fixed-toppomocą sticky-top. w ten sposób nie będziesz musiał obliczać wypełnienia.
I to działa !!

Shivam Agrawal
źródło

Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.Zobacz - getbootstrap.com/docs/4.5/components/navbar/#placement

Abhilash Kishore

11

Aby obsługiwać linie zawijania na pasku menu, zastosuj identyfikator na pasku nawigacyjnym, tak jak poniżej:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

i dodaj ten mały skrypt do głowy po dołączeniu jquery, w ten sposób:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

W ten sposób górna wyściółka korpusu zostaje automatycznie dostosowana.

Oliver Konig
źródło

Musiałem zmienić drugie odniesienie do wysokości w twoim przykładzie na $ ('# topnavbar'). Height () i wtedy to działało idealnie dla mnie. Dzięki!

bezwzględnie

1

Dziękuję za komentarz! Naprawiłem to w odpowiedzi.

Oliver Konig

To najlepsze rozwiązanie, na jakie się natknąłem, które działa na PC, iOS, Android - wszystkie urządzenia. Wszystkie pozostałe są albo zakodowanymi na stałe wartościami w pikselach, albo są zbyt długie i nie działają na wszystkich urządzeniach.

Oracular Man

Niezłe rozwiązanie. Miałem pewne niewielkie przesunięcia, które nie były uwzględniane w obliczeniach. Chyba dlatego, że mój pasek nawigacji miał pewne marginesy. Wybrałem zmianę wywołania height () dla wywołania outerHeight (), aby wziąć to pod uwagę.

Leonardo Santos

4

w przypadku Bootstrap 3. + użyłbym następującego CSS, aby naprawić navbar-fixed-top, a problem z zakotwiczeniem skoku nakładał się na podstawie https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

benzyna
źródło

Ten sam problem, ładna odpowiedź.

McGrady,

2

użyj tej klasy w tagu nav

class = "navbar navbar-expand-lg navbar-light bg-light sticky-top "

Do bootstrap 4

Kynginthenorth
źródło

Nigdy nie dowiem się, dlaczego został odrzucony, ponieważ działał dla mnie i wszystkich innych.

Kynginthenorth,

To jest poprawne. Jedynym problemem jest to, że w dokumentacji napisano: „Narzędzie .sticky-top wykorzystuje pozycję CSS: lepki, który nie jest w pełni obsługiwany we wszystkich przeglądarkach”

José

1

Wszystko co musisz zrobić to

@media (min-width: 980px) { body { padding-top: 40px; } }

Venkat Kotra
źródło

0

Zgodnie z odpowiedzią Nicka Bisby'ego, jeśli napotkasz ten problem przy użyciu HAML w szynach i zastosowałeś tutaj poprawkę Roberto Barrosa:

Wymieniłem wymaganie w „bootstrap_and_overrides.css” na:

= wymagają twitter-bootstrap-static / bootstrap.css.erb

(Zobacz https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 )

... musisz umieścić treść CSS przed instrukcją request w następujący sposób:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

Jeśli instrukcja wymaga przed CSS treści, nie zadziała.

danielmbarlow
źródło

0

Zrobiłbym to:

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

To powinno upewnić się, że blok nawigacyjny nie rozciąga się na dół strony i nie obejmuje zawartości strony.

developer10
źródło

-4

Właśnie owinąłem pasek nawigacyjny w

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

Brak wymyślnego hokusa, ale zadziałało ..

TTbooster
źródło

Twoja odpowiedź jest niejasna i nie rozwiązuje problemu. Co nav-? ??reprezentuje?

fragilewindows

twitter bootstrap pasek nawigacji naprawiono nakładającą się stronę

Odpowiedzi:

Wymagana wyściółka ciała