2

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

4

3 回答 3

1

定位是错误的。

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

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}
于 2013-07-19T21:28:27.743 回答
0

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

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。

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

于 2013-07-20T02:06:33.133 回答
-1

尝试这个...

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

于 2017-04-21T18:33:00.833 回答