2

大画面と小画面の両方で、twitter ブートストラップのナビゲーション バーの後ろのスペースを取り除こうとしています。

いくつかのリソースを読んだ後、cssをブートストラップとレスポンシブbootrtapの間に配置するこのソリューションを見つけました

 <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

ポジショニングが間違っています。

@media40px を 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 に答える