引导导航栏后面的空间答案

【问题标题】：Space behind bootstrap navbar引导导航栏后面的空间
【发布时间】：2012-09-27 15:21:54
【问题描述】：

使用引导程序的navbar，我试图弄清楚如何使它不隐藏正文部分的顶部。

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

<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 节，但会将其开头隐藏在引导导航栏后面。

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

【问题讨论】：

标签： javascript html twitter-bootstrap scroll

【解决方案1】：

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

我花了最后 2 个小时尝试搜索网络试图找到 Jquery 或 JS 以将填充应用到目标 div 并在修改我的 Google search terms found this

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

【讨论】：

我正在使用这种:target 技术，尽管我只想说当我访问任何锚点时它会自动将我的内容向下推（通过填充量）。当我单击同一文档中的不同锚点时，空间会恢复。有没有其他人注意到这一点，您是否知道任何解决方法？

【解决方案2】：

在您的<h4> 上放置一些顶部填充以说明您的navbar 的高度。 IE。把它放在你的 CSS 中：

h4 {
  padding-top: 30px;
}

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

【讨论】：

这是一个解决方案，现在是我所拥有的一切，所以我可能会按照你说的那样离开它。但显然它使我的页面在每个部分之间有巨大的丑陋空间。
嗨，试着放一个

【解决方案3】：

我遇到了同样的问题，但还没有找到真正的解决方案，但只是更多的解决方法（比如“padding-top”解决方法本身，这对我来说似乎很hackish）。看起来顶栏问题仍未解决，人们只是以某种方式绕过它。

一种对我有用的非侵入性解决方法（尽可能好）是将以下 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>

【讨论】：