380 Stimmen

Matthew Berman avatar

twitter bootstrap navbar fixiert oben überlappende Website

Gefragt el 20 de Juni, 2012
Wann wurde die Frage gestellt
341711 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

Antworten

Zu viele Anzeigen?

571voto

rfunduk avatar
rfunduk Punkte 29395

Ihre Antwort steht in der docs :

Körperpolsterung erforderlich

Die feste Navigationsleiste überlagert Ihre anderen Inhalte, es sei denn, Sie fügen padding an die Spitze der <body> . Probieren Sie Ihre eigenen Werte aus oder verwenden Sie unser Snippet unten. Tipp: Standardmäßig ist die Navbar 50px hoch.

body { padding-top: 70px; }

Stellen Sie sicher, dass Sie dies einschließen nach das Kern-CSS von Bootstrap.

und in der Bootstrap 4-Dokumente...

Feste Navbars verwenden position: fixed, d.h. sie werden aus dem normalen Fluss des DOM entnommen und erfordern möglicherweise benutzerdefiniertes CSS (z. B. padding-top ), um Überschneidungen mit anderen Elementen zu vermeiden.

Beantwortet el 20 de Juni, 2012 von rfunduk (29395 Punkte )

137voto

Nick Bisby avatar
Nick Bisby Punkte 1459

Wie andere bereits festgestellt haben, funktioniert das Hinzufügen eines Polsteraufsatzes zum Körper hervorragend. Aber wenn Sie den Bildschirm schmaler machen (auf Handy-Breiten) gibt es eine Lücke zwischen der Navbar und dem Körper. Außerdem kann eine überfüllte Navigationsleiste zu einer mehrzeiligen Leiste umbrechen und einen Teil des Inhalts wieder überschreiben.

Dies hat diese Art von Problemen für mich gelöst

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

Dies macht eine 40px Polsterung standardmäßig und 0px, wenn unter 768px Breite (die nach Bootstrap's docs ist das Handy-Layout Cutoff, wo die Lücke erstellt werden würde)

Beantwortet el 24 de Oktober, 2012 von Nick Bisby (1459 Punkte )

40voto

catsky avatar
catsky Punkte 1153

Eine viel praktischere Lösung für Ihre Referenz, sie funktioniert perfekt in allen meinen Projekten:

ändern Sie Ihre erste Zeile von

.navbar.navbar-fixed-top

まで

.navbar.navbar-default.navbar-static-top
Beantwortet el 19 de Juni, 2015 von catsky (1153 Punkte )

38voto

shivampip avatar
shivampip Punkte 1636

Einfach wechseln fixed-top と sticky-top . Auf diese Weise müssen Sie die Polsterung nicht berechnen.
Und es funktioniert!!

Beantwortet el 7 de August, 2019 von shivampip (1636 Punkte )

32voto

Rick avatar
Rick Punkte 1146

Die Lösung für Bootstrap 4, es funktioniert perfekt in allen meinen Projekten:

ändern Sie Ihre erste Zeile von

navbar-fixed-top

まで

sticky-top

Referenz der Bootstrap-Dokumentation

Wird auch Zeit, dass sie das richtig machen :D

Beantwortet el 20 de Juli, 2018 von Rick (1146 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X