javascript - Twitter Bootstrap 3.1.1 导航栏折叠和 div 问题

Question

我是 Twitter Bootstrap 的新手，我的导航栏没有正常折叠。

它在全屏桌面上显示良好(所有菜单项在一行上)但是当我从左到右折叠我的浏览器窗口时，导航栏元素增长成两行，然后适本地将一个堆叠在另一个顶部直到填满崩溃。

如何让导航栏按预期折叠？

我还有一个 div，我想将其放在导航栏 div 的正下方以显示公司 Logo (图像)。但是，div 似乎从页面顶部开始，而不是在导航栏 div 的正下方。

我该如何解决这个问题？

参见:Demo 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 一点点填充

body{
padding-top:100px;
}

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

而且您的菜单中的菜单项太多。这没有得到列指定的适当空间。所以你需要通过媒体查询来控制它们。我试着让它为你工作这是我的 jsfiddle 链接。你可以检查一下。可能对你有帮助

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