Twitter Bootstrap 3.1.1导航栏崩溃和div问题

Question

我是使用Twitter Bootstrap的新手，并且我有一个导航栏，它不会崩溃。

它在全屏桌面上显示良好（所有菜单项都在一行上），但是当我从左向右折叠浏览器窗口时，导航栏项会变成两行，然后适当地一层一层堆叠到另一层直到完全折叠。

如何使导航栏应折叠？

我还想在导航栏div的正下方放置一个div，以显示公司徽标（图片）。 但是，div似乎是从导航栏div的正下方开始的页面顶部开始的。

我该如何解决？

请参阅： 演示JSFiddle

 <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>&copy; <?php echo date("Y"); ?> - Copyright © XYZBuilding Supplies Ltd - All rights reserved</p>
            </footer>
        </div>

Answer 1

首先，根据您的导航栏高度给您的身体一点填充

body{
padding-top:100px;
}

因为您使用的是固定在页面顶部的固定导航栏。 您要在此div之后放置的所有内容都将从正文顶部开始。 因此填充是必要的，bootstrap的文档中也提到了填充。

而且菜单中的菜单项太多。 无法获得列指定的正确空间。 因此您需要通过媒体查询来控制它们。 我尝试使其适合您，这是我的jsfiddle链接。 你可以检查一下。 可能对您有帮助

http://jsfiddle.net/datechogeek/w4sJC/