web-dev-qa-db-ja.com

twitterのブーツストラップナビゲートバーの固定トップオーバーラップサイト

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

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

私はブートストラップの例を正確にコピーしようとしましたが、それでもnavbar fixed topを使用する場合にのみこの問題を抱えています。何が悪いの？

twitter-bootstraphaml
324
Matthew Berman

あなたの答えは docs にあります。

ボディパディングが必要

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

body { padding-top: 70px; }

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

そしてBootstrap 4 docs ...に

固定ナビゲーションバーはposition：fixedを使用します。これは、DOMの通常のフローから引っ張られており、他の要素と重ならないようにするためにカスタムCSS（たとえば、上のパディング）が必要になる場合があることを意味します。

478
rfunduk

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

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

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

これはデフォルトで40pxのパディングと768pxの幅の下では0pxになります（これはブートストラップの文書によればギャップが作られるであろう携帯電話のレイアウトカットオフです）

119
Nick Bisby

あなたの参考のためのはるかに便利な解決策、それは私のプロジェクトのすべてで完璧に動作します：

最初の行を

.navbar.navbar-fixed-top

に

.navbar.navbar-default.navbar-static-top
34
catsky

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

ナビゲーションバーを固定するときは、下に隠れている部分を忘れないでください。 <body>に40px以上のパディングを追加します。コアのBootstrap CSSの後とオプションのレスポンシブCSSの前に必ずこれを追加してください。

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

body { padding-top: 40px; }
25
davidrac

@ライアン、あなたは正しいです、高さをハードコーディングすることはそれがカスタムナビゲーションバーの場合にはうまくいかないでしょう。これは私が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);         
});
23
Aram Paronikyan

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

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

私はこのアプローチが好きです。なぜならそれはそれをうまく動作させるのに必要なハックを文書化しているだけでなく、それはまたモバイルナビゲーションにも機能するからです。

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

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}
19
Dan

問題は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>
16
Tomas Kubes

私が同様の質問で投稿したように、私は私の本当の固定ナビゲーションバーの直前にダミーの非固定ナビゲーションバーを作成することに成功しました。

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

間隔はすべての画面サイズでうまく機能します。

15
Jason Butler

以前のソリューションはすべて、40ピクセルをHTMLまたはCSSに何らかの方法でハードコーディングしていました。ナビゲーションバーに異なるフォントサイズまたは画像が含まれている場合はどうなりますか。そもそも body パディングを台無しにしない正当な理由がある場合はどうしますか？私はこの問題に対する解決策を模索してきました、そして私が思いついたものがここにあります：

$(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'});

シモンズ：上記は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'
        });
});
14
Ryan

メニューバーの折り返し行を処理するには、次のようにナビゲーションバーに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>

このようにして、ボディの上部パディングは自動的に調整されます。

11
Oliver Konig

Bootstrap 4のソリューションは、私のすべてのプロジェクトで完璧に機能します。

最初の行を

navbar-fixed-top

に

sticky-top

ブートストラップドキュメントリファレンス

彼らがこの権利を果たした時頃：D

9
Rick

bootstrap 3以降では、navbar-fixed-topと に基づくアンカージャンプの重複問題を修正するために、次のCSSを使用します。https://github.com/twbs/bootstrap/issues/1768

/* 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; 
}
3
gasolin

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

@media (min-width: 980px) { body { padding-top: 40px; } }
1
Venkat Kotra

navタグ内でこのクラスを使用します

class = "navbar navbar-expand-lg navbar-light bg-light sticky-top"

bootstrap 4の場合

0
Buttman

私はこれをするだろう：

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

これにより、navブロックがページを拡大せずにページのコンテンツをカバーするようになります。

0
developer10

Nick Bisbyの答えに加えて、RailsでHAMLを使用してこの問題を解決し、Roberto Barrosの修正をここに適用した場合は、次のようになります。

「bootstrap_and_overrides.css」のrequireを次のように置き換えました。

= Twitter-bootstrap-static/bootstrap.css.erbが必要です

（ https://github.com/seyhunak/Twitter-bootstrap-Rails/issues/91 を参照）

...次のように、本体のCSS を requireステートメントの前に置く必要があります。

@import "Twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "Twitter/bootstrap/responsive";
=require Twitter-bootstrap-static/bootstrap.css.erb

Requireステートメントが本文CSSの前にある場合、それは有効になりません。

0
danielmbarlow

fixed-topをsticky-topに変更するだけです。これにより、パディングを計算する必要がなくなります。
そして動作します!!

0
Shivam Agrawal