381 Stimmen

twitter bootstrap navbar fixiert oben überlappende Website

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?

0voto

developer10 Punkte 1440

Ich würde dies tun:

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

Damit soll sichergestellt werden, dass der Navigationsblock sich nicht nach unten erstreckt und den Seiteninhalt verdeckt.

0voto

danielmbarlow Punkte 67

Im Anschluss an Nick Bisby's Antwort, wenn Sie dieses Problem mit HAML in Schienen erhalten und Sie Roberto Barros' Fix hier angewendet haben:

Ich ersetzte die require in der "bootstrap_and_overrides.css" zu:

\=require twitter-bootstrap-static/bootstrap.css.erb

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

... müssen Sie den Körper CSS setzen vor die Anweisung require wie folgt:

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

Wenn die require-Anweisung vor dem body CSS steht, wird sie nicht wirksam.

0voto

X 47 48 - IR Punkte 929

Das funktioniert und sieht für mich gut aus.

<body class="pt-5 mt-4">....</body>

-4voto

TTbooster Punkte 5

Ich habe die Navigationsleiste einfach in eine

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

Kein ausgefallener Hokuspokus, aber es hat funktioniert.

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:

X