[英]Space behind bootstrap navbar
Using bootstrap's navbar
, I am trying to figure out how to make it not to hide the top of the body section. 使用bootstrap的
navbar
,我试图弄清楚如何使它不隐藏身体部分的顶部。
Actually, it is very well solved using what is recommended here: 实际上,使用此处推荐的内容可以很好地解决:
Twitter Bootstrap - top nav bar blocking top content of the page Twitter Bootstrap - 阻止页面顶部内容的顶部导航栏
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. 在这种情况下,当您单击,例如,第2节直接链接(或快捷方式)时,页面正确向下滚动直到第2节,但它隐藏在引导导航栏后面的开头。
Any clue about how can this be fixed? 关于如何解决这个问题的任何线索?
Put some top padding on your <h4>
's to account for your navbar
's height. 在
<h4>
上添加一些顶部填充以计算navbar
的高度。 Ie put this in your CSS: 即把它放在你的CSS中:
h4 {
padding-top: 30px;
}
Of course, change 30px
to you actual navbar
height. 当然,将
30px
更改为实际的navbar
高度。
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). 通过将:target psuedo-selector添加到链接的CSS,您可以将定义的填充应用于所选链接(只要它在浏览器中显示为: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 我花了最后2个小时试图搜索网络试图找到Jquery或JS来应用填充到目标div并在修改我的Google 搜索条件后发现这个
There might be a way to fool proof this with older browsers, but for the time being, this makes me a happy camper. 可能有一种方法可以用旧版浏览器来证明这一点,但就目前而言,这让我成为一个快乐的露营者。
I've had the same problem and haven't found a real solution, but just more workarounds (like the "padding-top" work-around itself, that seems very hackish to me). 我遇到了同样的问题,并没有找到真正的解决方案,但只是更多的解决方法(如“填充顶部”解决方案本身,这似乎非常hackish我)。 It looks like the topbar issue is still unsolved, people just hack around it somehow.
看起来topbar问题仍然没有解决,人们只是以某种方式破解它。
One non-invasive work-around that works for me (as good as it can) is to add the following JavaScript to the page (apart from the "padding-top" hack): 一个适合我的非侵入性解决方案(尽可能好)是将以下JavaScript添加到页面中(除了“padding-top”hack):
var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
I found this in a comment to a bootstrap GitHub issue . 我在对引导程序GitHub问题的评论中发现了这一点。 However, the function isn't executed in all necessary occasions (eg when going to the same anchor again).
但是,该功能不会在所有必要的场合执行(例如,当再次访问同一个锚时)。
A more reliable work-around is moving the anchor positions using CSS relative positioning (found in this StackOverflow answer : 更可靠的解决方法是使用CSS相对定位移动锚位置(在此StackOverflow答案中找到:
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
However, this is more invasive because you have to give your anchors a class (to distinguish it from links). 但是,这更具侵入性,因为你必须给你的锚一个类(以区别于链接)。 So you have to update all your anchor HTML code (which might not always be possible, eg when you are dealing with a rigid CMS that generates your anchors):
因此,您必须更新所有锚定HTML代码(这可能并非总是可能,例如,当您处理生成锚点的刚性CMS时):
<a class="anchor" id="top"></a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.