带有引导面板和固定导航栏的锚标记偏移

Question

我正在尝试让锚标记与带有固定导航栏的 Bootstrap 设置一起正常工作。由于我有一个固定的导航栏，我正在使用以下 CSS 代码来尝试让锚标签（哈希链接）向下滚动到正确的位置：

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

然后我将divs 与指定的jumptarget 类一起使用，该类包含我的内容。但是，当我将这些divs 变成面板时，上面的 css 代码停止工作。

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

如何同时使用这些面板和锚标记。此外，如果我只用anchortagclass 和相关的id 将我的面板封装在divs 中，它会扰乱我网站的显示。这是为什么呢？

Answer 1

锚链接（导航到同一页面上的内容）与 ID 一起使用，除非您使用的是问题中未包含的 Javascript。

这个例子有效：

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

注意：我在上方和下方添加了虚拟内容，以允许页面滚动以演示导航。