html - Bootstrap 导航栏菜单重叠文本

Question

我使用的是最新版本的 Bootstrap ，当我调整屏幕浏览器的大小时，导航栏在使用小切换按钮下拉时会与页面上的文本重叠，而不是将页面内容向下推。我已经多次研究过这个问题。我尝试将 padding-bottom 放在导航栏上，将 padding-top 放在 body 上。我已经尝试了许多其他建议但没有任何效果。感谢任何帮助。

这是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 只是应用颜色/字体/字体大小等，没有任何东西会导致这个问题。这是一个基本而简单的宣传册网站，我确信问题可能就在我眼前，但我没有足够的经验来注意到，因为我只是在学习，但仍然会感谢任何能提供帮助的人。

导航栏工作得很好，在正常大小的桌面上应该是这样，但只有当我将浏览器调整为手机大小时才会出现问题。

这是问题图片的 url，以便于理解: 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