ブートストラップnavbar-fixed-topが動作していません

Question

固定ナビゲーションバーがページの上部にあるページを作成しようとしています。私が必要とするものはthisのようなものです。

上記のリンクされたページでわかるように、ページの内容はnavbarを優先して開始されます。しかし私の場合、コンテンツはページの始めからすぐに始まります。それはnavbarが他のコンテンツの上に置かれるようなものです。

あなたはJsFiddleデモhereを見ることができます。

デモページでは、私は新しいものを追加していません。これは、この質問の早い段階でリンクされているページのソースを含んでいます。

これはページの本文セクション内に配置されている私のnavbarと他のdivです。

<!-- Fixed navbar --> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      ....... 
     </button> 
     <a class="navbar-brand" href="#">Bootstrap theme</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       ....... 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </nav> 

    <div class="container theme-showcase" role="main"> 
    ..... 
    </div> 

なぜ私のページが必要に応じて表示されないのですか。私のコードで何かを逃したことがありますか？

Answer 1

はCSSを追加：あなたはここに要素を検査することで、これを見ることができます

body { 
    padding-top: 70px; 
} 

。それはCSSに存在します。彼らは、このCSSコード

body { 
    padding-top: 70px; 
    padding-bottom: 30px; 
} 

を持っており、このコードは、あなたのHTMLに含まれていないtheme.cssファイルで使用されているブートストラップテンプレートで https://getbootstrap.com/examples/navbar-fixed-top/

Answer 2

。

あなたは

かは、あなたのHTMLコードにtheme.cssファイルにリンクすることができ、あなたのCSSのコードで上記のコードだけを追加することによってこの問題を解決することができますあなたが持っているHTMLで何も問題はありません