9

我在使用 twitter bootstrap 时遇到问题，这就是我的导航栏的样子： Bootstrap 导航栏在 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;
}
4

5 回答 5

22

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

html, body{
    margin:0px;
    padding:0px;
}
于 2013-06-07T11:17:44.120 回答
1

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

        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                ...
            </div>
        </div>
于 2013-06-06T12:46:26.477 回答
1

只是为了提供更多建议，以防有人在谷歌上搜索并遇到与我相同的问题。始终，始终确保您没有过度寻找更简单的解决方案来解决此问题。就我而言，导航栏被向下推，好像文档的某些部分有大约。~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*-->
于 2018-01-06T00:16:34.043 回答
0

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

* {
    margin:0;
    padding:0;
  }

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

于 2014-03-05T08:33:56.917 回答
0

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

于 2013-06-07T11:12:52.337 回答