Navbarとコンテナが折りたたまれました

-1

Helloをnavタグの下の見出しとして保存しようとしています。これは私のHTMLです。Navbarとコンテナが折りたたまれました

<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" /> 
    </div> 
    <ul class="nav navbar-nav navbar-right" id="navbarprop"> 
     <li id="home" class="active"> 
      <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a> 
     </li>    
    </ul> 
</div> 
</nav> 
<div class="container"> 
<h1>HELLO</h1> 
</div>

私はページを反応させたいと思っています。問題はNavタグ内にHelloが印刷されていることです。私はmargin-topを適用する必要があります：50px; "HELLO"を見えるようにする。どのように私はそれを反応させる。こちらは余白のない画像です http://imgur.com/q5yol6t こんにちはナビの中にあります。こちらは余白がある画像です http://imgur.com/j8tjUbZ ありがとうございます！

出典

2016-08-04 SAT Rai

あなたもCSSを共有する必要があります。あなたがjsfiddleまたは類似のもののようなものに置くことができるなら、何が良いだろう。 – Andrew

http://getbootstrap.com/components/#navbar-fixed-top

それは体がパディングを必要と言う部分で、特に見て。

<body>の上部にパディングを追加しない限り、固定ナビゲーションバーがあなたの他のコンテンツをオーバーレイします。あなた自身の価値観を試してみるか、下記のスニペットを使用してください。ヒント：デフォルトでは、navbarは50ピクセル高いです。

body { padding-top: 70px; }

コアのブートストラップCSSの後にこれを含めるようにしてください。

出典

2016-08-04 11:56:53 i7nvd

あなただけが、それはあなたを助けることを願っています（タブレット、ノートパソコンとデスクトップを除く）767pxより小さい画面用に別のマージントップを与える、メディアの画面でこれを解決することができます。

<style> 
body 
{ 
    background-color:#4FE1A8; 
} 
#wrapper 
{ 
    margin-top:50px; 
} 
@media screen and (max-width:767px) 
{ 
    #wrapper 
{ 
    margin-top:100px; 
} 
} 
</style> 
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: aliceblue;" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <img class="img-responsive" src="img/logo.png" style="width: 330px; height: 49px;" /> 
    </div> 
    <ul class="nav navbar-nav navbar-right" id="navbarprop"> 
     <li id="home" class="active"> 
      <a class="color" href="#"><i class="glyphicon glyphicon-home"></i>&nbsp Home</a> 
     </li>    
    </ul> 
</div> 
</nav> 
<div class="container" id="wrapper"> 
<h1>HELLO</h1> 
</div>

出典

2016-08-04 12:05:36

Navbarとコンテナが折りたたまれました

答えて

関連する問題