私のサイトでブートストラップを使用していて、navbar固定トップに問題があります。通常のナビゲーションバーを使用している場合は、すべて問題ありません。しかし、navbar fixed topに切り替えようとすると、navbarがなく、navbarがオーバーラップするように、サイト上の他のすべてのコンテンツがシフトアップします。ここに基本的に私がそれをレイアウトした方法があります：
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield contentブートストラップの例を正確にコピーしようとしましたが、navbar fixed topを使用した場合にのみこの問題が発生します。私は何を間違っていますか？
回答:
あなたの答えはドキュメントで正しいです：
ボディパッドが必要
の
padding上部に追加しない限り、固定ナビゲーションバーは他のコンテンツをオーバーレイします<body>。独自の値を試すか、以下のスニペットを使用してください。ヒント：デフォルトでは、ナビゲーションバーの高さは50pxです。body { padding-top: 70px; }コアBootstrap CSSの後に必ずこれを含めてください。
そしてBootstrap 4のドキュメントで...
固定ナビゲーションバーでの位置の使用：固定、つまりDOMの通常のフローから引き出され、他の要素との重複を防ぐためにカスタムCSS（例：のパディングトップ）が必要になる場合があります。
他の人がボディにパディングトップを追加すると述べたように素晴らしい働きをします。ただし、画面を（携帯電話の幅に対して）狭くすると、ナビゲーションバーと本体の間に隙間ができます。また、混み合ったナビゲーションバーが複数行のバーに折り返され、一部のコンテンツが再度上書きされる場合があります。
これは私のためにこれらの種類の問題を解決しました
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}これにより、デフォルトで40pxのパディングが作成され、768px幅未満の場合は0pxになります（これは、ブートストラップのドキュメントによれば、ギャップが作成される携帯電話のレイアウトのカットオフです）。
body { padding-top: 40px; }十分です
あなたの参照のためのはるかに便利な解決策、それは私のすべてのプロジェクトで完璧に機能します：
最初の行を
.navbar.navbar-fixed-topに
.navbar.navbar-default.navbar-static-topこの問題は既知であり、Twitterブートストラップサイトに回避策があります。
ナビゲーションバーを貼り付けるときは、その下の非表示領域を考慮してください。に40px以上のパディングを追加し
<body>ます。これは、コアブートストラップCSSの後、オプションのレスポンシブCSSの前に必ず追加してください。
これは私のために働きました：
body { padding-top: 40px; }@ライアン、正解です。高さをハードコーディングすると、カスタムナビゲーションバーの場合に正しく機能しなくなります。これは私が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);
}); parseInt高さのcss値を使用する代わりに、を使用しました$('#main-navbar').height()が、それ以外の場合、これは非常に役立ち、私の問題を解決しました。ありがとうございます。
問題はnavbar-fixed-topにあり、ボディパディングを指定しない限りコンテンツをオーバーレイします。ここで提供されるソリューションは、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>同様の質問で投稿したので、実際の固定ナビゲーションバーの直前にダミーの固定されていないナビゲーションバーを作成することに成功しました。
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>間隔はすべての画面サイズでうまく機能します。
Bootstrap 4のソリューションは、私のすべてのプロジェクトで完璧に機能します。
最初の行を
navbar-fixed-topに
sticky-top彼らがこれを正しく行った時間について：D
これまでのすべてのソリューションでは、40ピクセルを具体的にHTMLまたはCSSに何らかの方法でハードコードしていました。ナビゲーションバーに別のフォントサイズまたは画像が含まれている場合はどうなりますか？そもそもボディパディングを台無しにしない正当な理由がある場合はどうなりますか？私はこの問題の解決策を探していましたが、これが私が思いついたものです：
$(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関数を次に示します。3つのHTMLクラスが必要です（またはIDを使用できます）：user-top、admin-top、およびcontentwrap：
$(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'
});
});だけで変更fixed-topしてくださいsticky-top。これにより、パディングを計算する必要がなくなります。
そしてそれはうまくいきます!!
メニューバーの折り返し行を処理するには、次のように、ナビゲーションバーに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>こうすることで、ボディの上部パッドが自動的に調整されます。
Bootstrap 3. +の場合、次のCSSを使用して、navbar-fixed-topと、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;
}navタグ内でこのクラスを使用します
class = "navbar navbar-expand-lg navbar-light bg-light sticky-top "
ブートストラップ4用
Nick Bisbyの回答に加えて、レールでHAMLを使用してこの問題が発生し、ここでRoberto Barrosの修正を適用した場合：
「bootstrap_and_overrides.css」のrequireを次のように置き換えました：
= require twitter-bootstrap-static / bootstrap.css.erb
（https://github.com/seyhunak/twitter-bootstrap-rails/issues/91を参照してください）
... 次のように、requireステートメントの前に本文のCSSを配置する必要があります。
@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erbrequireステートメントがbody CSSの前にある場合、それは有効になりません。
私はこれを行います：
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }これにより、navブロックがダウンページを拡大せず、ページコンテンツをカバーするようになります。
navbarを
<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>派手なhocus pocusはありませんが、うまくいきました。
nav-? ??表していますか？