bootstrap navbar菜单重叠文本

Question

即时通讯使用最新版本的bootstrap,当我调整屏幕浏览器的大小时,使用小的切换按钮与页面上的文本重叠,而不是将页面内容向下推.我已多次研究过这个问题.我尝试将填充底部放在导航栏上并在底部填充顶部.我已经尝试了许多其他建议,但没有任何工作.感谢任何帮助.

这是html代码:

      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
      <div class="navbar-brand navbar-brand-left" href="#"><a href="index.html"><img src="somepicture"></a></div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered"">
      <ul class="nav navbar-nav">
         <li><a href="someurl">Home</a></li>
         <li><a href="someurl" id="active2">What's On</a></li>
         <li><a href="someurl">About Us</a></li>
         <li><a href="someurl">Parties</a></li>
        <li><a href="someurl">Gallery</a></li>
        <li><a href="someurl">Menu</a></li>
      </ul>
     <ul class="nav navbar-nav navbar-right">
    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Share<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="someurl">Facebook</a></li>
                <li><a href="someurl">Twitter</a></li>
              </ul>
        <li><a href="someurl">Contact Us</a></li>

      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

我使用的CSS只是应用颜色/字体/字体大小等,没有任何可能导致这个问题.它是一个基本而简单的宣传册网站,我确信这个问题可能就在我面前,但我没有经验足以注意到我只是学习,但仍然会感激任何可以帮助的人.

导航栏工作得非常好,并且在正常大小的桌面上的应用方式,但问题是只有当我将浏览器调整为手机大小时.

这是一个问题图像的网址,使其更容易理解:http: //s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html

Answer 1

在此过程中稍微清理了一下您的代码,但如果您将导航栏设置为navbar-static-top而不是navbar-fixed-top,则在展开折叠菜单时,您的内容将被推下.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
      <div class="navbar-brand navbar-brand-left" href="#">
        <a href="index.html">
          <img src="somepicture"></img>
        </a>

      </div>
    </div>
    <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <ul class="nav navbar-nav">
        <li><a href="someurl">Home</a>

        </li>
        <li><a href="#" id="active2 ">What's On</a>

        </li>
        <li><a href="#">About Us</a>

        </li>
        <li><a href="#">Parties</a>
        </li>
        <li><a href="#">Gallery</a>

        </li>
        <li><a href="#">Menu</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Share<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Facebook</a>

            </li>
            <li><a href="#">Twitter</a>

            </li>
          </ul>
          <li><a href="#">Contact Us</a>

          </li>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test