引导导航栏后面的空间

Question

使用bootstrap的navbar ，我试图弄清楚如何使它不隐藏身体部分的顶部。

实际上，使用此处推荐的内容可以很好地解决：

Twitter Bootstrap - 阻止页面顶部内容的顶部导航栏

但是仍有一些东西不起作用：当你有这样的链接时：

<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>

和

<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>

在这种情况下，当您单击，例如，第2节直接链接（或快捷方式）时，页面正确向下滚动直到第2节，但它隐藏在引导导航栏后面的开头。

关于如何解决这个问题的任何线索？

Answer 1

在<h4>上添加一些顶部填充以计算navbar的高度。 即把它放在你的CSS中：

h4 {
  padding-top: 30px;
}

当然，将30px更改为实际的navbar高度。

Answer 2

通过将：target psuedo-selector添加到链接的CSS，您可以将定义的填充应用于所选链接（只要它在浏览器中显示为：www.example.com＃link1）。

我花了最后2个小时试图搜索网络试图找到Jquery或JS来应用填充到目标div并在修改我的Google 搜索条件后发现这个

可能有一种方法可以用旧版浏览器来证明这一点，但就目前而言，这让我成为一个快乐的露营者。

Answer 3

我遇到了同样的问题，并没有找到真正的解决方案，但只是更多的解决方法（如“填充顶部”解决方案本身，这似乎非常hackish我）。 看起来topbar问题仍然没有解决，人们只是以某种方式破解它。

一个适合我的非侵入性解决方案（尽可能好）是将以下JavaScript添加到页面中（除了“padding-top”hack）：

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

我在对引导程序GitHub问题的评论中发现了这一点。 但是，该功能不会在所有必要的场合执行（例如，当再次访问同一个锚时）。

更可靠的解决方法是使用CSS相对定位移动锚位置（在此StackOverflow答案中找到：

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

但是，这更具侵入性，因为你必须给你的锚一个类（以区别于链接）。 因此，您必须更新所有锚定HTML代码（这可能并非总是可能，例如，当您处理生成锚点的刚性CMS时）：

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