導航欄和容器被摺疊

-1

我試圖保持你好，作爲導航標籤下面的標題。這是我的HTML。導航欄和容器被摺疊

<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>

我想使頁面響應。問題出現在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>的頂部添加填充。嘗試一下你自己的價值觀或者使用下面的代碼片段。提示：默認情況下，導航欄高50px。

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

導航欄和容器被摺疊

回答

相關問題