ブラウザ上のブートストラップnavbar固定トップパッドを修正する方法

Question

私は.navbar.navbar-inverse.navbar-fixed-topナビゲーションバーを常にページの上部にとどめています。私はbodyに70 pxのパディングを与えました。これはうまく動作します。

問題は、ブラウザのサイズを変更したときに、nav-barがもう固定された高さですっきりしていないことです。代わりに、すべてのアイテムをラップします。ナビゲーションバーの高さは70ピクセル以上になり、ページの一部をカバーします。

この問題を解決するために、私はナビゲーションバーの高さを確認し、身体に多くのパディングを与えるためにはJQueryを使用してみましたブラウザではないので、私はしかし、このソリューションは動作しません

if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) { 
    $("html, body").css("padding-top", "150px"); 
} 

document.ready()でこれを置きますそのサイズが縮小したときに再ロードされるため、このチェックは動的には発生しません。どうすればこの問題を解決できますか？

Answer 1

ここでは、ウィンドウサイズ変更イベントリスナーを使用できます。このような何か：

$(window).resize(function() { 
    if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) { 
    $("html, body").css("padding-top", "150px"); 
    } 
}); 

はまた、あなたはまた、ブートストラップの道を行くと崩壊し、画面の解像度に応じて、ボタンにナビゲーションバーを展開することができます。上記のアプローチは理想的なIMOよりわずかに少ない