我是使用Twitter Bootstrap的新手，我有一个不会崩溃的导航栏。
它在全屏桌面上显示得很好（一行上的所有菜单项）但是当我从左到右折叠我的浏览器窗口时，导航栏项目变长为两行，然后将一个放在另一个上面直到完全崩溃。
如何让导航栏崩溃？
我还有一个div，我想放在导航栏div下面以显示公司徽标（图像）。然而，div似乎从直接位于导航栏div下方的页面顶部开始。
我该如何解决这个问题？
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">XYZ</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="~/"><span class="glyphicon glyphicon-home"></span>Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-list-alt"></span>Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="OndulineSheets">Onduline Sheets</a></li>
<li><a href="OnduvillaTiles">Onduvilla Tiles</a></li>
<li><a href="#">Other Products</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-ok-sign"></span>Guarantee<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="Guarantee">Our Guarantee</a></li>
<li><a href="#">Tests and Certificates</a></li>
</ul>
</li>
<li><a href="~/Clients"><span class="glyphicon glyphicon-user"></span>Our Clients</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-camera"></span>Projects<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="Expos">Expos</a></li>
<li><a href="Projects">Training</a></li>
<li><a href="#">Eco Friendly Housing</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-inbox"></span>FAQ<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="Onduline">Onduline</a></li>
<li><a href="Onduvilla">Onduvilla</a></li>
</ul>
</li>
<li><a href="~/Downloads"><span class="glyphicon glyphicon-download-alt"></span>Downloads</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-info-sign"></span>About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Vision and Mission</a></li>
<li><a href="Eco-Responsibility">Eco-Responsibility</a></li>
</ul>
</li>
<li><a href="~/Contact"><span class="glyphicon glyphicon-pencil"></span>Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div id="TitleContent" style="text-align: center">
<img src="images/ecolinelogo.jpg" style="border-style: none" >
<br />
</div>
<div class="container body-content">
<div id="MainContent">
</div>
<hr />
<footer>
<p>© <?php echo date("Y"); ?> - Copyright © XYZBuilding Supplies Ltd - All rights reserved</p>
</footer>
</div>
答案 0 :(得分：0)
首先根据你的导航栏高度给你的身体一点点填充
body{
padding-top:100px;
}
因为您使用固定在页面顶部的固定导航栏。在此div之后你要放置的任何内容都将从正文顶部开始。所以填充是必要的，这也是在bootstrap的文档中提到的。
并且菜单中的菜单项也太多了。没有获得列指定的适当空间。所以你需要通过媒体查询来控制它们。我试着让它适合你这里是我的jsfiddle链接。你可以检查一下。它可能对你有帮助