Question

我正试图摆脱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; }}应该解决这个问题。我做错了什么

Answer 1

定位错误。

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

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

Answer 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;
    }
}

请注意我正在使用Bootstrap的v3.2.3。

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

Answer 3

试试这个......

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

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

3 个答案: