私はこのTwitter Bootstrapコードを持っています

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

しかし、ページの最初を表示しているときに、ナビゲーションバーがページの上部にあるコンテンツの一部をブロックしています。コンテンツがナビゲーションバーによってブロックされないように、ページの上部を表示したときに残りのコンテンツを押し下げる方法についてのアイデアはありますか？

CSSに追加：

body { 
    padding-top: 65px; 
}

Bootstrap docsから：

本体の上部にパディングを追加しない限り、固定ナビゲーションバーは他のコンテンツをオーバーレイします。

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

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

ブートストラップ3の場合、navbarを常に表示する必要がない限り、navbar-static-top代わりにクラスnavbar-fixed-topがこの問題を回避します。

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

最初の「div」を

<div class='navbar navbar-fixed-top'>

に

<div class="navbar navbar-default navbar-static-top">

この問題を解決するためにjQueryを使用しています。これは、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);        
});

私は、実際の固定ナビゲーションバーの直前にダミーの固定されていないナビゲーションバーを作成することに成功しました。

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

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

MVC 5チュートリアルから派生した私のプロジェクトでは、ボディパディングを変更しても効果がないことがわかりました。以下は私のために働きました：

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

ナビゲーションバーが2行または3行に折り畳まれるケースを解決します。これは、bootstrap.cssのline body {margin：0;の後のどこにでも挿入できます。}

ブートストラップv4 スターターテンプレートcssは以下を使用します。

body {
  padding-top: 5rem;
}

このTwitterの例にあるように、レスポンシブスタイルの宣言を含む行の前に次のコードを追加します。

<style> 
    body {
        padding-top: 60px;
    }
</style>

そのようです：

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

navbar navbar-defaultでは、すべてが正常に動作しますが、navbar-fixed-topを使用している場合は、カスタムスタイルの本文{padding-top：60px;}を含める必要があります。そうしないと、下のコンテンツがブロックされます。

ここで2つの問題が発生します。

1. ページの読み込み（コンテンツは非表示）
2. このような内部リンクは一番上までスクロールし、ナビゲーションバーで非表示になります。

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

内部ページリンク付きのブートストラップ4

1）を修正するには、Martijn Burgerが上記のように言ったように、ブートストラップv4スターターテンプレートcssは以下を使用します。

body {
  padding-top: 5rem;
}

修正するには2）この問題を確認してください。このコードはほとんど機能します（ただし、同じハッシュの2回目のクリックでは機能しません）。

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

このコードは、AリンクをjQuery（slim jQueryではない）でアニメーション化します。

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })

これまでに見つけた、高さやブレークポイントをハードコーディングしない最善の解決策は<nav...、マークアップにタグを追加することです。

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

このようにすることで、@mediaブレークポイントが同じになり、高さが同じになります（ただし、navbar-brandオブジェクトがで最も高いオブジェクトのnavbar場合）は、非fixed-topナビゲーションバーの別の要素を簡単に置き換えることができます。

これが失敗するのは、2つのnavbar-brand要素を表示するスクリーンリーダーの場合です。これは、not-for-srその要素がスクリーンリーダーに表示されないようにするクラスの必要性を示しています。ただし、そのクラスは存在しません https://getbootstrap.com/docs/4.0/utilities/screenreaders/

私はスクリーンリーダーの問題を補正しようとしましたaria-hidden="true"が、 https：//www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/は、スクリーンリーダーが動作しているときにおそらく動作しないことを示しているようですもちろんフォーカスモードでは、実際に機能させるために必要なのはこのときだけです...

を使用percentageするよりもはるかに優れたソリューションですpixels。

body {
  padding-top: 10%; //This works regardless of display size.
}

必要に応じてbreakpoints、別の回答で述べられているように別のものを追加することで、明示的にすることができます@spajus

編集：このソリューションは、navbar-inverseクラスとnavbar-static-topクラスが使用できない新しいバージョンのBootstrapでは実行できません。

MVC 5を使用して修正した方法は、次の行を使用して、他の後にロードされる自分のSite.cssを単に追加することでした。 body{padding: 0}

_Layout.cshtmlの冒頭のコードを次のように変更しました。

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

<div class='navbar' data-spy="affix" data-offset-top="0">

ナビゲーションバーが元々ページの上部にある場合は、値を0に設定します。それ以外の場合は、 data-offset-topナビゲーションバーの上のコンテンツの値に。

その間、次のように変更する必要がありますcss。

.affix{
  width:100%;
  top:0;
  z-index: 10;
}

これを追加：

.navbar {
  position: relative;
}

追加する必要があります

#page {
  padding-top: 65px
}

スティッキーフッターなどを破壊しない

JSに追加：

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

画面の解像度に基づいてマージンを設定できます

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}