twitter-bootstrap Bootstrap：锚点和正文顶部边距/填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14526334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: anchors and body top margin/padding
提问by MaxAuray
I'm using Bootstrap with a global navbar fixed to the top of the page body.
我正在使用 Bootstrap，全局导航栏固定在页面正文的顶部。
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">MyBrand</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#>Page 1</li>
<li><a href="#>Page 2</li>
<li><a href="#>Page 3</li>
</ul>
</div>
</div>
</div>
</div>
I added a 40px margin on top of the body in order the top of page content underlying not to be overlayed by the navbar.
我在正文顶部添加了一个 40px 的边距，以便底部的页面内容顶部不被导航栏覆盖。
body {
background-color: #f5f5f5;
position: relative;
margin-top: 40px;
}
Up to there, everything works fine. I also make usage of internal anchors in order to ease the navigation inside the page, using the same mechanisms Twitter used with the affix component on the Bootstrap documentation, making the user able to jump to different sections within the page (see http://twitter.github.com/bootstrap/getting-started.html)
到那里，一切正常。我还使用内部锚点来简化页面内的导航，使用 Twitter 与 Bootstrap 文档中的词缀组件相同的机制，使用户能够跳转到页面内的不同部分（参见http:// twitter.github.com/bootstrap/getting-started.html）
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
[...]
<section id="section1">
[...]
[...]
[...]
</section
<section id="section2">
[...]
[...]
[...]
</section
<section id="section3">
[...]
[...]
[...]
</section>
My problem is when the user clicks, the browser sticks the target to the very top of the screen, the content disappears underthe navbar. I noticed Twitter used a trick, the targeted <section>tags include a "padding-top: 30px;", the closest <h1>include a "margin-top: 10px;" CSS directive in order the text to be displayed exactly 40px below the top of the screen.
我的问题是当用户点击时，浏览器将目标贴在屏幕的最顶部，内容在导航栏下消失。我注意到 Twitter 使用了一个技巧，目标<section>标签包括“padding-top: 30px;”，最接近的标签包括<h1>“margin-top: 10px;”。CSS 指令，以便文本显示在屏幕顶部下方 40 像素处。
I cannot allow me to "lose" 40px between each section, my display have to remain compact. My question is: is there a way in order internal anchors not to stick to the very top of the screen view but to remain away from of the top of the screen an arbitrary length?
我不能让我在每个部分之间“失去”40px，我的显示器必须保持紧凑。我的问题是：有没有办法让内部锚点不粘在屏幕视图的最顶部，而是远离屏幕顶部任意长度？
回答by MaxAuray
Finally, I figured out how to easilysolve this issue:
最后，我想出了如何轻松解决这个问题：
body {
background-color: #f5f5f5;
position: relative;
margin-top: 40px;
}
section {
padding-top:40px;
margin-top:-40px;
}
This means a 40px margin is added on top of the body, a 40px padding is added on top of the sections, a negative 40px margin is also added in order to move up their respective expected locations, introducing an invisible margin taken into account when the browser draws the display to a section after an anchor is clicked.
这意味着在主体顶部添加了 40 像素的边距，在部分顶部添加了 40 像素的填充，还添加了负 40 像素的边距以向上移动它们各自的预期位置，引入一个不可见的边距，当单击锚点后，浏览器将显示绘制到一个部分。
Hope this help.
希望这有帮助。
回答by Josh Close
To get it to scroll to the correct position and to have the selected menu item be correct when scrolling the page, you need to set padding-top: 40px;on the anchor, and set margin-bottom: -40px;on the previous sibling of the anchor.
要让它滚动到正确的位置并在滚动页面时使所选菜单项正确，您需要padding-top: 40px;在锚点上设置，并在锚点margin-bottom: -40px;的前一个兄弟上设置。
You can achieve this with a JS snippet that will find the elements from the nav menu and apply the styling changes.
您可以使用 JS 代码段来实现此目的，该代码段将从导航菜单中查找元素并应用样式更改。
$("header .nav a[href!=#]").each(function(){
$($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
});
回答by MagnusN
If your application can apply javascript then the following javascript works well too:
如果您的应用程序可以应用 javascript，那么以下 javascript 也可以很好地工作：
function maybeScrollToHash() {
if (window.location.hash && $(window.location.hash).length) {
var newTop = $(window.location.hash).offset().top - $('.navbar-fixed-top').height() + parseInt($('body').css('padding-top'),10);
$(window).scrollTop(newTop);
}
}
$(window).bind('hashchange', function() {
maybeScrollToHash();
});
maybeScrollToHash();
It is a slight modification of the answer found here: https://github.com/twbs/bootstrap/issues/193
这是对这里找到的答案的轻微修改：https: //github.com/twbs/bootstrap/issues/193
The only difference is that the code above works on the navbar-fixed-topclass.
唯一的区别是上面的代码适用于navbar-fixed-top类。
