即时通讯使用最新版本的bootstrap,当我调整屏幕浏览器的大小时,使用小的切换按钮与页面上的文本重叠,而不是将页面内容向下推。我已多次研究过这个问题。我尝试将填充底部放在导航栏上并在底部填充顶部。我已经尝试了许多其他建议,但没有任何工作。感谢任何帮助。
这是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
答案 0 :(得分:14)
在此过程中稍微清理了您的代码,但如果您将导航栏设置为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