Bootstrap导航栏标题与小屏幕上的内容重叠 [英] Bootstrap navbar header overlaps content on small screens

问题描述

我创建了自举导航栏，并在小屏幕上重叠了页面内容。当导航栏与其重叠时，是否有办法将内容向下推送？

 < header class =navbar navbar-inverse navbar-fixed-top bs -docs-NAV> 
< div class =container-fluid> 
< div class =navbar-header> 
< button class =navbar-toggletype =buttondata-toggle =collapsedata-target =。bs-navbar-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a href =./class =navbar-brand>< img id =topLogosrc =http://placehold.it/50x25alt =LOGO HEREclass = IMG响应 >< / A> 
< / div> 
< nav class =collapse navbar-collapse bs-navbar-collapse> 
< ul class =nav navbar-nav> 
< li> 
< a href =＃>入门< / a> 
< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown> Dropdown< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
< li> 
< a href =＃>组件< / a> 
< / li> 
< li> 
< a href =＃> JavaScript< / a> 
< / li> 
< li> 
< a href =＃>自订< / a> 
< / li> 
< / ul> 
< ul class =nav navbar-nav navbar-right> 
< li class =active>< a href =register.php>< span class =glyphicon glyphicon-user>< / span>注册< / a>< / li> 
< li>< a href =login.php>< span class =glyphicon glyphicon-log-in>< / span>登录< / A>< /锂> 
< / ul> 
< / nav> 
< / div> 
< / header> 
< div class =container-fluid> 
< h1>文字1< / h1> 
< h2>文本2< / h2> 
< h3>文字3< / h3> 
< h4>文字4< / h4> 
< h5>文字5< / h5> 
< h6>文字6< / h6> 
< / div> 
  

我尝试将navbar-fixed-top更改为static和non fixed，但是更改为使导航栏不在页面顶部开始

http://jsfiddle.net/7v9tcc2m/3/

解决方案当您使用类 navbar-fixed-top navbar将重叠内容。删除它，然后它会按预期工作

继续您的评论。之所以你有顶部和导航之间的空间，是因为你已经得到了 padding 的身体。删除它然后它将工作。

演示 此处

I have created a bootstrap navbar and on small screens it overlaps the pages content. Is there a way to push the content down when the navbar would overlap it? Preferably it could be done in HTML or CSS.

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container-fluid">
<div class="navbar-header">
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
    <a href="./" class="navbar-brand"><img id="topLogo" src="http://placehold.it/50x25" alt="LOGO HERE" class="img-responsive"></a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
  <ul class="nav navbar-nav">
    <li>
      <a href="#">Getting started</a>
    </li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    <li>
      <a href="#">Components</a>
    </li>
    <li>
      <a href="#">JavaScript</a>
    </li>
    <li>
      <a href="#">Customize</a>
    </li>
  </ul>
   <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</nav>
</div>
</header>
<div class="container-fluid">
<h1>Text 1</h1>
<h2>Text 2</h2>
<h3>Text 3</h3>
<h4>Text 4</h4>
<h5>Text 5</h5>
<h6>Text 6</h6>
</div>

I've tried changing the navbar-fixed-top to both static and non fixed, however changing to makes the navbar not start at the top of the page

http://jsfiddle.net/7v9tcc2m/3/

解决方案

When you use the class navbar-fixed-top the navbar will overlap the content. Remove this and then it'll work as expected

Following from your comment. The reason why you have space between the top and the nav is because you've got padding on the body.. remove this then it will work.

Demo here

这篇关于Bootstrap导航栏标题与小屏幕上的内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！