自举导航栏后面的空间 [英] Space behind bootstrap navbar

问题描述

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

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

但仍有一些不起作用：当您有这样的链接时：

 < li> < a href =＃section1>前往第1部分< / a>< / li> 
< li>< a href =＃section2>前往第2部分< / a>< / li> 
< li>< a href =＃section3>前往第3节< / a>< / li> 
< li>< a href =＃section4>前往第4部分< / a>< / li> 
  

和

 < h4 id =Section 1> Section 1< / h4> 
< p>第1部分的内容< / p> 
< p>< a href =＃>返回页首< / a>< / p> 
 
< h4 id =Section 2>第2部分< / h4> 
< p>第2部分的内容< / p> 
< p>< a href =＃>返回页首< / a>< / p> 
 
< h4 id =Section 3> Section 3< / h4> 
< p>第3部分的内容< / p> 
< p>< a href =＃>返回页首< / a>< / p> 
 
< h4 id =Section 4>第4节< / h4> 
< p>第4部分的内容< / p> 
< p>< a href =＃>返回页首< / a>< / p> 
  

在这种情况下，当您点击第2节直接链接（或快捷方式）时，该页面正确地向下滚动，直到第2部分，但它隐藏了它的开始后面的引导navbar。

任何线索怎么能解决这个问题？

解决方案

通过将：target psuedo-selector添加到链接的CSS，您可以将定义的填充应用到选定的链接在你的浏览器中：www.example.com＃link1）。

我花了最近2个小时试图搜索Web，试图找到Jquery或JS来应用填充目标股利和修改我的谷歌搜索条件找到这个后

可能有一种方法可以在较老的浏览器中实现这一点，但暂时来说，这让我成为一名快乐的露营者。

Using bootstrap's navbar, I am trying to figure out how to make it not to hide the top of the body section.

Actually, it is very well solved using what is recommended here:

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

But there is still something that is not working: when you have a link like this:

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

And

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

In this case, when you click on, for example, Section 2 direct link (or shortcut), the page properly scrolls-down until the section 2, but it hides the beginning of it behind the bootstrap navbar.

Any clue about how can this be fixed?

解决方案

By adding the :target psuedo-selector to a linked CSS you can apply a defined padding to your selected link (as long as it displays in your browser as: www.example.com#link1).

I spent the last 2 hours trying to search the web trying to find Jquery or JS to apply padding to the target div and after modifying my Google search terms found this

There might be a way to fool proof this with older browsers, but for the time being, this makes me a happy camper.

这篇关于自举导航栏后面的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！