Html Bootstrap：导航栏没有固定在最顶部有 40 像素的填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16962222/
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 not fixed to very top has like 40px padding?
提问by arberb
I am having an issue with twitter bootstrap this is how my navbar looks like:
我在使用 twitter bootstrap 时遇到问题，这就是我的导航栏的样子：
There is a gap between the top of the page and the navbar. I tried using
页面顶部和导航栏之间存在间隙。我尝试使用
.navbar{ position: fixed !important; top: 0px; padding: 0px; margin: 0px; }
.navbar{ 位置：固定！重要；顶部：0px；填充：0px；边距：0px；}
in my css file but its still not working. It looks like this in mobile and desktop (with the responsive css). I tried putting my sites css after the responsive css and before but it doesn't do anything. Does anyone have any idea why is this so?
在我的 css 文件中，但它仍然无法正常工作。它在移动设备和桌面设备中看起来像这样（带有响应式 css）。我尝试将我的网站 css 放在响应式 css 之后和之前，但它没有做任何事情。有谁知道为什么会这样？
THe navbar data from bootstrap.css:
bootstrap.css 中的导航栏数据：
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-right: 0;
padding-left: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
回答by ErikMes
Make your you body,html doesnt have any padding to,
让你的身体，html没有任何填充，
html, body{
margin:0px;
padding:0px;
}
回答by Jean Louren?o
Are you using navbar-inner?
For a navbar you will need this hierarchy of classes and divs:
你在用navbar-inner吗？对于导航栏，您将需要这个类和 div 的层次结构：
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
...
</div>
</div>
回答by Michael Beyer
Just to give one more piece of advice in case anyone googles this and has the same problem as me. Always, always make sure you are not over looking a much more simple solution to this problem. In my case, the navbar was pushed down as if some part of the document had approx. ~40px of padding but, the issue was a stray character being hidden above the navbar like so:
只是再提供一条建议，以防万一有人在谷歌上搜索并遇到与我相同的问题。始终，始终确保您不会过度寻找针对此问题的更简单的解决方案。在我的情况下，导航栏被按下，好像文档的某些部分有大约。〜40px的填充但是，问题是一个杂散字符隐藏在导航栏上方，如下所示：
<script>
*JavaScript would go here*
\</script> <!-- Here you can see the offending backslash before the '</script> tag and it was hidden due to it being a similar color to my dark background. -->
<body id="wrapper">
{% block navbar %}
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<!--- Logo -->
<!--*rest of the file*-->
回答by Ravimallya
Please check whether bodyhas padding-topor margin-top. If you'are directly trying to edit the bootstrap docs page, it has padding-topfor body so that the content won't get wrapped under the fixed navbar.
请检查是否body有padding-top或margin-top。如果您直接尝试编辑引导程序文档页面，则它具有padding-top正文，以便内容不会被固定在导航栏下。
回答by Rasmus Stougaard
Remember to reset the the padding and margin for all the elements
请记住重置所有元素的填充和边距
* {
margin:0;
padding:0;
}
Also if the content of the inside the nav bar has a margin top it can sometimes push it also.
此外，如果导航栏内部的内容有一个边距顶部，它有时也可以推动它。
