Platz hinter der Bootstrap-Navbar

Question

Mit der Bootstrap-Funktion navbar Ich versuche herauszufinden, wie ich es schaffe, den oberen Teil des Körpers nicht zu verdecken.

Eigentlich ist es sehr gut gelöst, wenn man das verwendet, was hier empfohlen wird:

Twitter Bootstrap - obere Navigationsleiste blockiert den oberen Inhalt der Seite

Aber es gibt immer noch etwas, das nicht funktioniert: Wenn Sie einen Link wie diesen haben:

<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
<li><a href="#section4">Go to Section 4</a></li>

Und

<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p><a href="#">Back to Top</a></p>

In diesem Fall, wenn Sie auf, zum Beispiel, Abschnitt 2 direkten Link (oder Verknüpfung), die Seite richtig scrollt nach unten, bis der Abschnitt 2, aber es versteckt den Anfang davon hinter der Bootstrap-Navbar.

Gibt es einen Hinweis darauf, wie das Problem behoben werden kann?

Answer 1

Legen Sie etwas Polsterung oben auf Ihr <h4> für Ihre navbar der Höhe. D.h. setzen Sie dies in Ihr CSS:

h4 {
  padding-top: 30px;
}

Natürlich, Veränderung 30px für Sie tatsächlich navbar Höhe.

Answer 2

Durch Hinzufügen des :target psuedo-Selektors zu einem verlinkten CSS können Sie eine definierte Auffüllung auf Ihren ausgewählten Link anwenden (solange er in Ihrem Browser als: www.example.com#link1 angezeigt wird).

Ich habe die letzten 2 Stunden damit verbracht, das Web zu durchsuchen und zu versuchen, Jquery oder JS zu finden, um Padding auf das Ziel-Div anzuwenden, und nachdem ich meine Google Suchbegriffe fanden dies

Vielleicht gibt es eine Möglichkeit, dies mit älteren Browsern zu umgehen, aber im Moment bin ich damit sehr zufrieden.

Answer 3

Ich hatte das gleiche Problem und habe keine wirkliche Lösung gefunden, sondern nur weitere Workarounds (wie den "padding-top"-Workaround selbst, der mir sehr hakelig erscheint). Es sieht so aus, als ob das Topbar-Problem immer noch ungelöst ist, die Leute hacken einfach irgendwie drum herum.

Ein nicht-invasiver Workaround, der bei mir funktioniert (so gut es eben geht), ist das Hinzufügen des folgenden JavaScript zur Seite (abgesehen von dem "padding-top"-Hack):

var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);

Ich fand dies in einem Kommentar zu einer Bootstrap GitHub Ausgabe . Die Funktion wird jedoch nicht in allen erforderlichen Fällen ausgeführt (z. B. wenn derselbe Anker erneut angesteuert wird).

Eine zuverlässigere Lösung ist das Verschieben der Ankerpositionen mithilfe der relativen CSS-Positionierung (zu finden in diese StackOverflow-Antwort :

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

Dies ist jedoch aufwändiger, da Sie Ihren Ankern eine Klasse zuweisen müssen (um sie von Links zu unterscheiden). Sie müssen also Ihren gesamten Anker-HTML-Code aktualisieren (was nicht immer möglich ist, z. B. wenn Sie mit einem starren CMS arbeiten, das Ihre Anker generiert):

<a class="anchor" id="top"></a>