Wie behebt man das Blockieren von Website-Inhalten durch die Navigationsleiste in Twitter Bootstrap?

Navigationsleiste blockiert Website-Inhalte

Dieses Problem tritt auf, wenn die oben fixierte Navigationsleiste von Twitter Bootstrap verwendet wird. Zunächst kann es sein, dass Benutzer beim Betrachten des Seitenanfangs feststellen, dass Inhalte durch die Navigationsleiste blockiert werden. Um dieses Problem zu beheben und zu verhindern, dass Inhalte blockiert werden, kann die folgende Lösung implementiert werden:

Wie in der Antwort vorgeschlagen, reicht das einfache Hinzufügen von Padding, um den Inhalt nach unten zu verschieben, für reaktionsfähige Bootstrap-Frameworks nicht aus. Beim Ändern der Größe des Browserfensters könnte eine Lücke zwischen dem oberen Rand der Seite und der Navigationsleiste entstehen.

Daher wird ein umfassenderer Ansatz empfohlen:

body {
  padding-top: 60px;
}

@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Dieser CSS-Code fügt einen oberen Abstand von 60 Pixeln hinzu zum Textkörper, wodurch der Hauptinhalt effektiv unter die Navigationsleiste verschoben wird. Bei mobilen oder kleineren Bildschirmgrößen (Bildschirmbreiten unter 979 Pixel) wird jedoch die obere Polsterung entfernt, um Überlappungsprobleme zu vermeiden.

Durch die Implementierung dieser Lösung können Benutzer sicherstellen, dass die Navigationsleiste oben fixiert bleibt Seite, stört aber nicht mehr das Seherlebnis von Inhalten in der Nähe.

Das obige ist der detaillierte Inhalt vonWie behebt man das Blockieren von Website-Inhalten durch die Navigationsleiste in Twitter Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!