引导导航栏菜单与文本重叠

Posted 2023-03-05

【中文标题】引导导航栏菜单与文本重叠

【英文标题】：bootstrap navbar menu overlaps text

【发布时间】：2015-01-04 15:23:24

【问题描述】：

我使用最新版本的引导程序，当我调整屏幕浏览器的大小时，导航栏在使用小切换按钮下拉时会与页面上的文本重叠，而不是向下推送页面内容。我曾多次研究过这个问题。我尝试将 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 只是应用颜色/字体/字体大小等，没有任何东西会导致这个问题。它是一个基本且简单的宣传册网站，我确信问题可能就在我眼前，但我没有足够的经验注意到我只是在学习，但仍然会感谢任何可以提供帮助的人。

导航栏工作得非常好，它应该在正常大小的桌面上工作，但问题只是当我将浏览器调整为手机大小时。

这是一个问题图片的网址，以便于理解： http://s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html

【问题讨论】：

固定导航栏要求正文中的填充或边距，如文档中所述。由于它可能以像素为单位设置，因此在包装时它不会改变。另见：***.com/questions/11124777/…

是的，我之前试过这个，我只是再试了一次，但这一切只是将页面内容向下推?导航栏的文本仍然与页面内容重叠

单独的 JS 工作正常...bootply.com/Ey7iLyIsTo 我将菜单翻了几次以强制换行（bootply 不会让你缩小视口）

【参考方案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

【讨论】：

效果如何？它在您的网站上做了什么？请详细说明，以便我或其他人可以帮助您找到正确的答案。

它所做的只是将页面内容向下推送，当浏览器调整大小时导航栏仍然与文本重叠，我不知道为什么。

这对我有用，除了有一个小缺陷 - 它在导航栏上方放置了一个所有空白区域。关于如何处理它的任何想法？

@user2075599，仔细检查页面上使用的 CSS。还要查看官方文档以确保您没有包含您不应该包含的内容。如果您从固定变为静态，请确保您的 CSS 中不再有 body padding-top: 70px; ，因为这是固定版本所必需的。请记住：如有疑问，请使用浏览器的开发工具检查页面本身以了解发生了什么。

有一个类似的空白问题，刚刚意识到，我的导航栏在我的内容容器（container-fluid）中。