twitter-bootstrap Bootstrap - 导航栏固定顶部覆盖内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19741145/
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 - navbar-fixed-top covers content
提问by testerius
I have a question about navbar-fixed-top. Well, I have a simple problem with it. My fixed navbar covers content, for example in "About us" page, it covers row with "About us" title.
我有一个关于导航栏固定顶部的问题。好吧，我有一个简单的问题。我的固定导航栏涵盖了内容，例如在“关于我们”页面中，它涵盖了带有“关于我们”标题的行。
I have no idea how can I fix it, because when I resize website (mobile devices size) the header is visible.
我不知道如何修复它，因为当我调整网站大小（移动设备大小）时，标题是可见的。
Of course I have this kind of problem with headers in other pages (Full Width and 404).
当然，我对其他页面（全宽和 404）中的标题有这种问题。
Also, in Index page, it covers some of carousel slider.
此外，在索引页面中，它涵盖了一些轮播滑块。
Information:
信息：
bootstrap 2.3.2
引导程序 2.3.2
Let me know, how can I fix it on all resolutions.
让我知道，我怎样才能在所有分辨率上修复它。
回答by Pablote
the response is in the page:
响应在页面中：
Twitter Bootstrap - top nav bar blocking top content of the page
Add to your CSS:
添加到您的 CSS：
body {
padding-top: 65px;
}
or a more complex solution but responsive, if your navbar change the height( ex in tablets appears in more to 60px; or is different ) use a mixed solution with css and javascript
或更复杂但响应迅速的解决方案，如果您的导航栏更改高度（前平板电脑出现在 60 像素以上；或者不同），请使用带有 css 和 javascript 的混合解决方案
CSS:
CSS：
#godown{
height: 60px;
}
HTML (resumen)
HTML（简历）
<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...
</nav>
<!-- This div make the magic :) -->
<div class="godown-60" id="godown"></div>
<!-- the rest of your site -->
...
JAVASCRIPT:
爪哇脚本：
<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position
$("#navMenu").resize(function () {
$('#godown').height($("#navMenu").height() + 10);
});
if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);
</script>
回答by Antonio Jha
Try class="navbar-static-top". It still allows navigation bar to be stay on the top but doesn't block content.
试试 class="navbar-static-top"。它仍然允许导航栏保持在顶部，但不会阻止内容。
回答by yay
position: stickyinstead of position: staticdid the trick for me.
position: sticky而不是position: static为我做的伎俩。
回答by DamiCode
Just add an id or class to the content, and then give it a margin top enough to make the content show without the static navbar hindering it and add the "!important" attribute to make it work.....
只需在内容中添加一个 id 或类，然后给它一个足够的边距，使内容显示，而没有静态导航栏阻碍它，并添加“！重要”属性以使其工作.....
回答by developer10
I would do this:
我会这样做：
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
This should make sure the nav block doesn't stretch downpage and covers the page content.
这应该确保导航块不会向下拉伸并覆盖页面内容。
