Html 引导导航栏菜单与文本重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26807960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap navbar menu overlaps text
提问by DecafOyster208
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.
我使用的是最新版本的引导程序，当我调整屏幕浏览器的导航栏大小时，使用小切换按钮下拉时会与页面上的文本重叠，而不是将页面内容向下推。我已经多次研究过这个问题。我尝试将 padding-bottom 放在导航栏上，将 padding-top 放在身体上。我已经尝试了许多其他建议的东西，但没有任何效果。感谢任何帮助。
This is the html code:
这是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>
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.
我使用的 css 只是应用颜色/字体/字体大小等，不会导致这个问题。它是一个基本而简单的小册子网站，我确信问题可能就在我眼前，但我没有足够的经验来注意到我只是在学习，但仍然会感谢任何可以提供帮助的人。
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.
导航栏工作得非常好，它应该在正常大小的桌面上工作，但只有当我将浏览器调整为手机大小时才会出现问题。
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
这是问题图片的网址，以便于理解：http: //s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html
回答by MattD
Cleaned up your code a bit in the process, but if you set your navbar to be navbar-static-toprather than navbar-fixed-top, your content will get pushed down when the collapsed menu is expanded.
在此过程中稍微清理了您的代码，但如果您将导航栏设置为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