372

サイトでブートストラップを使用していますが、ナビゲーションバーの固定トップに問題があります。通常のナビゲーションバーを使用しているときは、すべて問題ありません。ただし、ナビゲーションバーの固定トップに切り替えようとすると、サイト上の他のすべてのコンテンツが、ナビゲーションバーが存在せず、ナビゲーションバーが重なっているようにシフトアップします。これが基本的に私がそれをどのようにレイアウトしたかです：

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

ブートストラップの例を正確にコピーしようとしましたが、ナビゲーションバーの固定トップを使用している場合にのみこの問題が発生します。私は何が間違っているのですか？

4

19 に答える 19

563

あなたの答えはドキュメントに正しいです：

ボディパディングが必要

paddingの上部に追加しない限り、固定ナビゲーションバーは他のコンテンツをオーバーレイします<body>。独自の値を試すか、以下のスニペットを使用してください。ヒント：デフォルトでは、ナビゲーションバーの高さは50ピクセルです。

body { padding-top: 70px; }

コアのブートストラップCSSの後にこれを含めるようにしてください。

とBootstrap4のドキュメントで...

固定ナビゲーションバーの使用位置：固定。つまり、DOMの通常のフローからプルされ、他の要素との重複を防ぐためにカスタムCSS（たとえば、のパディングトップ）が必要になる場合があります。

于 2012-06-20T17:19:46.893 に答える
131

他の人が述べているように、ボディにパディングトップを追加するとうまくいきます. しかし、画面を（携帯電話の幅まで）狭くすると、ナビゲーションバーと本体の間に隙間ができます。また、混雑したナビゲーション バーが複数行のバーに折り返され、コンテンツの一部が再び上書きされる可能性があります。

これは私にとってこれらの種類の問題を解決しました

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

これにより、デフォルトで 40px のパディングが作成され、幅が 768px 未満の場合は 0px になります (これは、ブートストラップのドキュメントによると、ギャップが作成される携帯電話のレイアウトのカットオフです)。

于 2012-10-24T14:56:58.170 に答える
37

あなたの参照のためのはるかに便利なソリューションであり、私のすべてのプロジェクトで完璧に機能します:

最初の行を次から変更します

.navbar.navbar-fixed-top

に

.navbar.navbar-default.navbar-static-top
于 2015-06-18T22:04:10.367 に答える
29

@Ryan、そうです、高さをハードコーディングすると、カスタムナビゲーションバーの場合にうまく機能しなくなります。これは、私が BS 3.0.0 で喜んで使用しているコードです。

$(window).resize(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
   $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);         
});
于 2013-10-17T06:50:54.507 に答える
28

この問題は既知であり、Twitter ブートストラップ サイトに回避策があります。

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

これは私のために働いた：

body { padding-top: 40px; }
于 2012-06-20T17:22:29.567 に答える
22

これを収量コンテナーの前に置きます。

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

このアプローチが気に入っているのは、それを機能させるために必要なハックが文書化されているだけでなく、モバイル ナビゲーションでも機能するからです。

編集 - これははるかにうまく機能します:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
于 2012-12-22T16:09:09.353 に答える
16

問題は navbar-fixed-top にあり、body-padding を指定しない限りコンテンツをオーバーレイします。ここで提供される解決策は、100% の場合に機能するわけではありません。JQuery ソリューションは、ページが読み込まれた後にページを点滅/シフトさせますが、これは奇妙に見えます。

私にとっての本当の解決策は、navbar-fixed-top ではなく、navbar-static-top を使用することです。

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
于 2015-01-10T22:48:26.933 に答える
14

以前のすべてのソリューションは、何らかの方法で 40 ピクセルを html または CSS に具体的にハードコーディングしていました。navbar に異なるフォントサイズまたは画像が含まれている場合はどうなりますか? そもそも体のパディングを台無しにしない正当な理由がある場合はどうなりますか? 私はこの問題の解決策を探していましたが、ここに私が思いついたものがあります:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

「1」を調整することで上下に移動できます。サイズ変更前後のナビゲーションバーのコンテンツのサイズに関係なく、私にとってはうまくいくようです。

他の人がこれについてどう思うか興味があります。あなたの考えを共有してください。(繰り返しないようにリファクタリングされます。) jQuery を使用する以外に、この方法で問題にアプローチしない理由はありますか? 次のようなセカンダリナビゲーションバーでも動作します：

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: 上記は Bootstrap 2.3.2 です - 3.x でも動作しますか? 一般的なクラス名が残っている限り... 実際、ブートストラップとは無関係に動作するはずですよね?

編集: これは、動的サイズの 2 つの積み重ねられたレスポンシブ固定ナビゲーションバーを処理する完全な jquery 関数です。user-top、admin-top、および contentwrap の 3 つの html クラス (または ID を使用できます) が必要です。

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});
于 2013-08-05T07:47:41.980 に答える
11

メニューバーの折り返し行を処理するには、次のようにナビゲーション バーに ID を適用します。

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

次のように、jquery をインクルードした後に、この小さなスクリプトをヘッドに追加します。

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

そうすれば、本体の上部パディングが自動的に調整されます。

于 2013-11-25T16:00:12.903 に答える
4

Bootstrap 3.+ の場合、次の CSS を使用して、 https://github.com/twbs/bootstrap/issues/1768に基づいて navbar-fixed-top とアンカー ジャンプのオーバーラップの問題を修正し ます。

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}
于 2014-12-06T08:42:56.483 に答える
1

あなたがしなければならないのは

@media (min-width: 980px) { body { padding-top: 40px; } }
于 2014-08-13T02:13:23.000 に答える
0

私はこれを行います：

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

これにより、ナビゲーション ブロックがダウンページに伸びず、ページ コンテンツをカバーするようになります。

于 2015-04-30T18:29:12.227 に答える
-4

ナビゲーションバーを

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

派手なまぼろしはありませんが、うまくいきました..

于 2014-03-05T01:19:41.720 に答える