web-dev-qa-db-ja.com

Twitter-ブートストラップナビゲーションバーの高さが小さすぎる

Twitter-Bootstrapのナビゲーションバーのデフォルトの高さが小さすぎます。高さが高くなると、下のdivに侵入します。ページ全体を下にスライドさせるナビゲーションバーの高さを上げるにはどうすればよいですか？これが可能な場合、ナビゲーションバーのリンクをナビゲーションバーの上部/下部に配置する方法。

csstwitter-bootstrapnavbar
8
Gattoo

私はこのソリューションが好きではないと確信していますが、これに費やす必要のある時間は機能します。

.navbar .container { height: 2em; }

また、同じセレクターにパディングトップを追加して、ナビゲーションバー内のものを垂直方向にうまく整列させる必要がありました。

編集：私はあなたの質問を読み直しました、そしてあなたが「以下のdiv」で問題を抱えているのを見ました。これを行うには、bodyタグのパディングも調整する必要があります。

body { padding-top: 6em; }

Twitter Bootstrap Navbarのドキュメント ：

ナビゲーションバーを取り付けるときは、その下の隠れた領域を考慮することを忘れないでください。 <body>に40px以上のapddingを追加します。コアBootstrap CSSの後、オプションのレスポンシブCSSの前にこれを追加してください。

19
Chris

レスポンシブブートストラップを使用している場合は、そのようなパディングを追加するだけでは不十分です。この場合、ウィンドウのサイズを変更すると、ページの上部とナビゲーションバーの間にギャップが生じます。適切な解決策は次のようになります。

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

ソース： Twitter Bootstrap-ページのトップコンテンツをブロックするトップナビゲーションバー

6
jpillora

あなたはこれを試すことができます。あらゆるサイズのディスプレイで動作します。

.navbar .container { min-height: 83px; }


.navbar-fixed-top {
    position:static;
    margin-bottom:20px;
    }
1
Faisal Khan Samrat
</script>

$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});

</script>

これは私の同様の問題を解決しました（最初のクリックで親のulの高さが小さいため、サブメニューが表示されませんでした）おそらくそれはあなたにもうまくいくでしょう。

0
Ceren Akın