8

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

4

4 に答える 4

19

私はこのソリューションが気に入らないと確信していますが、これに費やさなければならない時間は機能します。

.navbar .container { height: 2em; }

また、同じセレクターに padding-top を追加して、navbar 内のものを垂直方向にうまく整列させる必要がありました。

編集：あなたの質問を読み直したところ、「下のdiv」に問題があることがわかりました。これを行うには、 body タグのパディングも調整する必要があります。

body { padding-top: 6em; }

NavbarのTwitter Bootstrap ドキュメントに従って:

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

于 2012-04-13T19:29:41.743 に答える
6

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

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

出典: Twitter Bootstrap - トップ ナビゲーション バーがページのトップ コンテンツをブロックしている

于 2012-10-04T17:23:17.803 に答える
1

これを試すことができます。あらゆるサイズのディスプレイで機能します。

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


.navbar-fixed-top {
    position:static;
    margin-bottom:20px;
    }
于 2013-01-09T07:00:13.113 に答える
0 
</script>

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

</script>

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

于 2013-08-07T01:15:27.447 に答える