8

Bootstrap の最新バージョンを使用してサイトのスタイルを設定していますが、バグのようなものに遭遇しました。ここで JSFiddle として表示できます。

標準の固定位置のトップ ナビゲーション バーを追加し、その後にいくつかのコンテンツを追加すると、後続のコンテンツが約 60px プルアップされ、トップ ナビゲーション バーの下に配置されます。そこで、 Bootstrap の例のページを調べたところ、これを修正するために明らかに使用されているインライン CSS (head セクション) が少し見つかりました。

body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

これは私を大いに驚かせ、これが Bootstrap の見過ごされたバグの結果なのか、それとも当然のこととしてこれを行うべきなのか疑問に思っています。

後者の場合、Bootstrap がすぐに使用できる CSS ソリューションであるはずなのに、なぜインライン CSS を使用する必要があるのか​​を知りたいと思います。

前者の場合、なぜこれがそのままなのかを知りたいのですが、Bootstrap CSS がナビゲーションバーの下部などにパディングを追加しないのはなぜですか?

4

3 に答える 3

6

ドキュメントから：

.navbar-fixed-topを追加し、その下の非表示領域を考慮して、に少なくとも40pxのパディングを追加することを忘れないでください<body>。これは、コアBootstrap CSSの後、オプションのレスポンシブCSSの前に必ず追加してください。

はなので、他の要素に.navbar-fixed-topは影響しません。position: fixedpadding

編集

「2つの.cssの間」のアドバイスは、モバイルデバイスの問題を防ぐのに役立ちます。position: fixed多くのデバイスで壊れているように、ナビゲーションバーが機能しstatic、<body>パディングによって上部に空白のラップが作成されます。したがってbootstrap-responsive.css、そのビューポートのこのパディングを上書きします。

ルールにメディアクエリを追加するだけで、その動作を再現できます。

@media (min-width: 979px) {
    body {
        padding-top: 60px;
    }
}

このルールをカスタムスタイルシートに含め、<style>タグを忘れてください。

于 2012-09-27T10:24:12.877 に答える
4

ナビゲーションバーを追加しない場合、パディングは必要ありません。ブートストラップ自体はこれが当てはまるかどうかを知ることができないので、この小さなCSSビットを自分で配置する必要があります。

于 2012-09-27T10:20:14.087 に答える
2

ドキュメントから：

. .navbar-fixed-top_ <body>_ これは、コア Bootstrap CSS の後、オプションのレスポンシブ CSS の前に必ず追加してください。

http://twitter.github.com/bootstrap/components.html

于 2012-09-27T10:29:41.307 に答える