ブーストラップのナビゲーションバーの下のページの上部にdivを修正します。

Question

基本的には、ヘッダーが必要なすべてのページの先頭にヘッダー領域を修正しようとしています。アイデアは、必要に応じて適用できるクラスでdivを使用することです。

私は基本的な固定されたdivを試しましたが、私はいつもそれがコンテンツと重なってしまいます。誰もが説明することができます/いくつかのCSSを表示する体の上部にすべてのコンテンツを押してdivを浮かべてください。

スクロールは固定されているため、スクロールは以下のコンテンツにのみ影響します。

私の試みは、以下で私を残した：

あなたが他のすべてのコンテンツがダウン浮かべすべきときにアプリケーションのタイトルは、テーブルと重なり見ることができるように。

Answer 1

問題のdivに固定の位置付けを適用し、本体にpadding-topを追加して上から下に押します。 Bootstrapは、コンポーネントのbody要素にpadding-topをCSSクラスの.navbar-fixed-topと組み合わせて追加することで、この影響を受けます。それ以外の場合はpadding-topまたは相対位置position: relative;をcontent要素に適用できます。

.topbar-fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100% 
} 

.body { 
    padding-top: 50px; /* height of fixed bar */ 
} 

/* OR */ 

.content-element { 
    position: relative; 
    top: 50px; 
} 

Answer 2

navbarを上に修正することができます。

HTML

<nav id="header" class="navbar navbar-fixed-top"> 
      <div id="header-container" class="container navbar-container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a id="brand" class="navbar-brand" href="#">Project name</a> 
       </div> 
       <div id="navbar" class="collapse navbar-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> 
        </ul> 
       </div><!-- /.nav-collapse --> 
      </div><!-- /.container --> 
     </nav><!-- /.navbar --> 

CSS

html, 
body { 
    overflow-x: hidden; /* Prevent scroll on narrow devices */ 
} 
body { 
    padding-top: 100px; 
} 
footer { 
    padding: 30px 0; 
}