Anchor-Tag-Offset mit Bootstrap-Panels und fester Navbar

Question

Ich versuche, Anker-Tags richtig mit meinem Bootstrap-Setup mit einer festen Navbar zu bekommen. Da ich eine feste navbar haben, bin ich mit den folgenden CSS-Code, um zu versuchen und die Anker-Tags (Hash-Links) nach unten scrollen, um den richtigen Ort:

.jumptarget:before { 
display: block; 
content: " "; 
margin-top: -60px; 
height: 60px; 
visibility: hidden; 
} 

Dann div s Ich verwende mit der jumptarget Klasse zugeordnet welche meinen Inhalt halten. Wenn ich diese div s jedoch in Panels umwandele, funktioniert der obige css-Code nicht mehr.

<div class="panel panel-default jumptarget" id="1"> 
<!-- random content here - this is the example that doesn't work --> 
</div> 

Wie kann ich diese Panels und Anker Tags zusammen verwenden. Auch, wenn ich meine Panels in div s mit nur der anchortag Klasse und der relevanten id umwandele es vermasselt die Anzeige meiner Website. Warum ist das?

Answer 1

Anchor-Links (zum Navigieren zum Inhalt auf derselben Seite) funktionieren mit IDs, es sei denn, Sie verwenden Javascript, das nicht in Ihrer Frage enthalten ist.

Dieses Beispiel funktioniert:

http://jsbin.com/xivecaz/2/edit?html,css,output

Anmerkung: Ich habe oben und unten Dummy-Inhalte hinzugefügt, um die Seite zu ermöglichen, blättern, um die Navigation zu demonstrieren.