Bootstrap导航栏菜单重叠文本问题

Question

Bootstrap导航栏菜单重叠文本问题

htmlcsstwitter-bootstrapdrop-down-menunavbar

6

我正在使用最新版本的Bootstrap。当我调整浏览器窗口大小时，导航栏会下拉并出现小型切换按钮，但它会覆盖页面上的文本而不是将页面内容向下推。我已经进行了多次问题研究。我尝试在导航栏上放置padding-bottom，并在正文上放置padding-top。我已经尝试了其他许多建议，但没有任何作用。感谢任何帮助。

以下是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

- DecafOyster208

固定的导航栏需要在文档中指定的主体上添加填充或边距。由于它可能以像素为单位设置，所以当内容换行时不会改变。参见：https://dev59.com/Pmgu5IYBdhLWcg3wuJSF - BReal14

我之前尝试过这个，现在又试了一下，但是它只是将页面内容整体向下推，而不是在浏览器调整大小时按下切换按钮以展开菜单。如果这样说有意义的话？导航栏的文本仍然会重叠在页面内容上。 - DecafOyster208

JS本身运行良好... http://www.bootply.com/Ey7iLyIsTo 我将菜单重复几次以强制换行（bootply不允许您缩小视口）。 - BReal14

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MattD · Accepted Answer

在此过程中，我稍微整理了您的代码，但如果您将导航栏设置为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