javascript - 引导导航栏后面的空间

使用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节，但它将其开头隐藏在引导导航栏中。

关于该如何解决的任何线索？

最佳答案

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

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

也许有一种方法可以使用较旧的浏览器来进行愚弄，但这暂时使我成为一个快乐的露营者。