导航栏和容器被折叠

-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

导航栏和容器被折叠

回答

相关问题