Bootstrap：导航栏没有固定到最顶部，有 40px 的填充？答案

【问题标题】：Bootstrap: Navbar not fixed to very top has like 40px padding?Bootstrap：导航栏没有固定到最顶部，有 40px 的填充？
【发布时间】：2013-06-02 11:15:40
【问题描述】：

我在使用 twitter bootstrap 时遇到问题，这是我的导航栏的样子：

页面顶部和导航栏之间有空隙。我尝试使用

.导航栏{ 位置：固定！重要；顶部：0px；填充：0px；边距：0px； }

在我的 css 文件中，但它仍然无法正常工作。它在移动和桌面（使用响应式 css）中看起来像这样。我尝试将我的网站 css 放在响应式 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;
}

【问题讨论】：

导航栏的 CSS/HTML 代码是什么？

标签： html css twitter-bootstrap

【解决方案1】：

让你的身体，html没有任何填充，

html, body{
    margin:0px;
    padding:0px;
}

【讨论】：

【解决方案2】：

你在使用navbar-inner吗？对于导航栏，您将需要这种层次结构的类和 div：

        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                ...
            </div>
        </div>

【讨论】：

【解决方案3】：

只是为了提供更多建议，以防有人在谷歌上搜索并遇到与我相同的问题。始终，始终确保您没有过度寻找解决此问题的更简单的方法。在我的情况下，导航栏被向下推，好像文档的某些部分有大约。大约 40 像素的填充，但问题是导航栏上方隐藏了一个流浪字符，如下所示：

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

【讨论】：

【解决方案4】：

请检查body 是否有padding-top 或margin-top。如果您直接尝试编辑 bootstrap 文档页面，则它的正文为 padding-top，这样内容就不会被包裹在固定的导航栏下。

【讨论】：

【解决方案5】：

记得重置所有元素的内边距和边距

* {
    margin:0;
    padding:0;
  }

此外，如果导航栏内部的内容顶部有边距，它有时也可以推动它。

【讨论】：