twitter bootstrap 导航栏和内容之间的差距答案

【问题标题】：Gap between twitter bootstrap navbar and contenttwitter bootstrap 导航栏和内容之间的差距
【发布时间】：2017-05-11 02:29:29
【问题描述】：

我正在尝试摆脱 twitter bootstrap 导航栏后面的空间，用于大屏幕和小屏幕。

在阅读了一些资源后，我发现了这个解决方案，我将我的 css 放在 bootstrap 和响应式 bootsrtap 之间

 <link href="/static/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
    @media screen and (max-width: 768px) {
        body { padding-top: 0px; }
    }
    body { padding-top: 40px; }

</style>
<link href="/static/css/bootstrap-responsive.css" rel="stylesheet">

当浏览器屏幕很大时，这会照顾导航栏后面的空间，但当浏览器缩小时，导航栏和内容之间会出现间隙。我认为@media screen and (max-width: 768px) {body { padding-top:0px; }} 应该可以解决这个问题。请问我做错了什么

【问题讨论】：

我也有同样的问题。但是，与上面的 CSS 不同，我将我的 CSS 与媒体查询放在 <link /> 之后到 Bootstrap 响应式 CSS 文件。但是，这似乎并不能解决问题。我希望其他人已经弄清楚了这一点——我找不到任何追踪似乎会导致这种行为的样式的东西。
见下文；我发现了造成差距的原因。

标签： twitter-bootstrap navbar

【解决方案1】：

定位错误。

将@media 放在后面，这样它会将 40px 覆盖为 0，而不是相反。

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

【讨论】：

这似乎不起作用。我尝试将这个 CSS 放在 <link />s 到引导默认和响应式 CSS 样式表之间。我还尝试在包含 Bootstrap 响应式 CSS 样式表之后仅放置 @media 查询部分，但这也不起作用。您能否提供更多详细信息？

【解决方案2】：

我开始思考这个问题，并意识到如果不是容器或标题栏本身，也许是我看不到的东西？事实证明，确实如此。这是隐藏菜单。

bootstrap-responsive.css 中的以下代码是导致标题和内容之间的差距的原因：

.navbar-fixed-top { margin-bottom: 20px; }

使用以下媒体查询应该很简单（在包含 bootstrap-responsive.css 之后）：

@media screen and (max-width: 767px) {
    .navbar-fixed-top {
        margin-bottom: 0px;
    }
}

请注意，我使用的是 v3.2.3 的 Bootstrap。

更新：我注意到在更宽的浏览器宽度处重新出现了差距。这是因为上面的媒体查询仅适用于 767 像素以下的浏览器宽度。我建议将媒体查询的max-width 属性值更改为979px。

【讨论】：

【解决方案3】：

试试这个...

我遇到了同样的错误，发现这对我有用。

【讨论】：