引导导航栏菜单重叠文本 [英] bootstrap navbar menu overlaps text

问题描述

im使用最新版本的引导程序，当我调整屏幕浏览器的导航栏，当下降与小切换按钮重叠页面上的文字，而不是推页面内容下来。我已经研究了这个问题几次。我试着把padding-bottom在navbar和padding-top在身上。我试过许多其他建议的事情，但没有什么工作。赞赏任何帮助。

im using the latest version of bootstrap and when i resize the screen browser the navbar, when dropped down with the small toggle button overlaps the text on the page instead of pushing page content down. I have researched the problem several times. I tried putting padding-bottom on the navbar and padding-top on the body. I have tried numerous other things suggested but nothing is working. Appreciate any help.

这是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只是应用颜色/字体/字体大小等，造成这个问题。它的一个基本和简单的小册子网站，并确保问题可能是在我眼前，但没有足够的经验，足以注意到im只学习，但仍然会赞赏任何人可以帮助。

the css i have used was to only apply color/font/font size etc, nothing that would have contributed to this problem. Its a basic and simple brochure website and im sure the problem is probably right in front of my eyes but im not experienced enough to notice as im only learning, but still would appreciate anyone that could help.

导航栏的工作原理很好，它应该在正常大小的桌面，但问题是，只有当我调整浏览器的手机大小。

The navbar works perfectly fine and the way its supposed to in a normal size desktop but the problem is only when i resize the browser to a mobile phone size.

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

This is a url of an image of the problem to make it easier to understand: http://s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html

推荐答案

在此过程中清理了您的代码，但如果您将navbar设置为 navbar-static-top ，而不是 navbar-fixed-top ，您的内容将在展开折叠菜单时被压缩。

Cleaned up your code a bit in the process, but if you set your navbar to be navbar-static-top rather than navbar-fixed-top, your content will get pushed down when the collapsed menu is expanded.

<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

这篇关于引导导航栏菜单重叠文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！