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/