Question

我遇到了twitter bootstrap的问题，这就是我的导航栏的样子： Bootstrap navbar is in bue

页面顶部与导航栏之间存在间隙。我尝试使用

.navbar { 位置：固定！重要; 顶部：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;
}

Answer 1

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

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

Answer 2

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

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

Answer 3

请检查body是padding-top还是margin-top。如果您直接尝试编辑引导程序文档页面，则它对于正文具有padding-top，以便内容不会被包装在固定的导航栏下。

Answer 4

请记住重置所有元素的填充和边距

* {
    margin:0;
    padding:0;
  }

此外，如果导航栏内部的内容有一个上边距，它有时也会推动它。

Answer 5

只是提出一条建议，以防任何人谷歌搜索这个并且和我有同样的问题。始终，始终确保您不会为这个问题寻找更简单的解决方案。在我的情况下，导航栏被按下，好像文档的某些部分有大约一样。 ~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*-->

Bootstrap：导航栏没有固定到顶部有40px填充？

5 个答案: