twitter bootstrap navbar fixiert oben überlappende Website

Question

twitter bootstrap navbar fixiert oben überlappende Website

Gefragt el 20 de Juni, 2012: Wann wurde die Frage gestellt
341712 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich verwende Bootstrap auf meiner Website und habe Probleme mit der Navigationsleiste oben fixiert. Wenn ich nur die normale Navigationsleiste verwende, ist alles in Ordnung. Allerdings, wenn ich versuche, es zu navbar festen oben zu wechseln, alle anderen Inhalte auf der Website verschiebt sich wie die navbar ist nicht da und die navbar überlappt es. hier ist im Grunde, wie ich es ausgelegt:

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

Ich habe versucht, Bootstraps Beispiele genau zu kopieren, aber immer noch mit diesem Problem nur bei Verwendung von navbar oben fixiert. was mache ich falsch?

Gefragt el 20 de Juni, 2012 von Matthew Berman

Answer 1

5 Antworten

Answer 2

29voto

Aram Paronikyan Punkte 1552

@Ryan, Sie haben Recht, die harte Kodierung der Höhe wird dazu führen, dass es bei benutzerdefinierten Navbars schlecht funktioniert. Dies ist der Code, den ich für BS 3.0.0 glücklicherweise verwende:

$(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);         
});

Beantwortet el 17 de Oktober, 2013 von Aram Paronikyan (1552 Punkte )

Answer 3

27voto

davidrac Punkte 10593

Dieses Problem ist bekannt und es gibt einen Workaround auf der Twitter-Bootstrap-Seite:

Wenn Sie die Navigationsleiste anbringen, denken Sie bitte daran, dass t darunter. Fügen Sie 40px oder mehr Padding zu der <body> . Achten Sie darauf, dass Sie nach dem Kern-CSS von Bootstrap und vor dem optionalen responsiven CSS.

Das hat bei mir funktioniert:

body { padding-top: 40px; }

Beantwortet el 20 de Juni, 2012 von davidrac (10593 Punkte )

Answer 4

22voto

Dan Punkte 1689

Ich habe dies vor den Ertragsbehälter gestellt:

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

Mir gefällt dieser Ansatz, weil er den dafür notwendigen Hack dokumentiert und auch für die mobile Navigation funktioniert.

EDIT - das funktioniert viel besser:

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

Beantwortet el 22 de Dezember, 2012 von Dan (1689 Punkte )

Answer 5

18voto

Jason Butler Punkte 626

Wie ich bereits in einer ähnlichen Frage geschrieben habe, hatte ich guten Erfolg mit der Erstellung einer nicht fixierten Dummy-Navbar direkt vor meiner echten fixierten Navbar.

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

Die Abstände sind auf allen Bildschirmgrößen gut zu erkennen.

Beantwortet el 16 de Marsch, 2016 von Jason Butler (626 Punkte )

Answer 6

16voto

Tomas Kubes Punkte 21732

Das Problem liegt in der navbar-fixed-top, die den Inhalt überlagert, wenn nicht body-padding angegeben wird. Keine der hier vorgestellten Lösungen funktioniert in 100% der Fälle. Die JQuery-Lösung blinkt/Verschiebung der Seite, nachdem die Seite geladen ist, die seltsam aussieht.

Die wirkliche Lösung für mich ist nicht die Verwendung von navbar-fixed-top, sondern 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>

Beantwortet el 10 de Januar, 2015 von Tomas Kubes (21732 Punkte )

twitter bootstrap navbar fixiert oben überlappende Website

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

twitter bootstrap navbar fixiert oben überlappende Website

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: