Question

使用bootstrap的navbar，我试图找出如何使其不隐藏身体部分的顶部。

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

Twitter Bootstrap - top nav bar blocking top content of the page

但是仍有一些东西无效：当你有这样的链接时：

<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，以便在修改我的Google search terms found this

之后将填充应用于目标div

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

Answer 3

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

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

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

我在comment to a bootstrap GitHub issue找到了这个。但是，该功能不会在所有必要的场合执行（例如，再次转到同一个锚时）。

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

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

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

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

引导导航栏后面的空间

3 个答案: