引导的NavBar不崩如预期 - 分离成两行(Bootstrap NavBar not collap

问题背景：

我在我的网站上使用Twitter的引导，并已纳入我的网站菜单导航栏collpasing。

问题：

所述NavBar按预期但是当屏幕击中一定宽度标志我有内折叠到一个按钮NavBar和菜单项分离到两个单独的行。下面显示的问题：

这是与页面完全展开并根据需要工作的导航栏：

这是与页面略有减小和响应，注意NavBar现在已经分成两行。这是不期望的行为我想。我的理想我想选择留在同一行或折叠到按钮：

这说明NavBar完全崩溃了：

编码：

这是我NavBar标记。我不明白为什么我看到与上述意外行为NavBar分成两行：

<div class="navbar navbar-fixed-top">
    <nav class="navbar navbar-default" role="navigation" id="nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">FM<b>FC</b></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" class="scroll-link" data-id="Welcome">Welcome</a></li>
                    <li><a href="#" class="scroll-link" data-id="features">Club</a></li>
                    <li><a href="#" class="scroll-link" data-id="About">About Us</a></li>
                    <li><a href="#" class="scroll-link" data-id="Gallery">Gallery</a></li>
                    <li><a href="#" class="scroll-link" data-id="Committee">Committee</a></li>
                    <li><a href="#" class="scroll-link" data-id="Contact">Contact Us</a></li>
                    <li><a href="#" class="scroll-link" data-id="Location">Location</a></li>
                    <li><a href='@Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

在制订这个问题的任何帮助将不胜感激。

Answer 1:

净资产值已包装到2行，因为你有很多菜单项和自举container切换到750px的屏幕宽度缩小。你有2个选择..

一种选择是使用全宽container-fluid （这可能不是你的设计工作）： http://codeply.com/go/TfbwIivilI

另一种选择是减少在该导航栏崩溃的地步。这就需要CSS覆盖默认的导航栏崩溃点。在围绕1000像素的情况下，似乎最好的工作： http://codeply.com/go/kcaXYh7ARB

Answer 2:

这一切发生的时候，因为你有这么多的li元素，所以你需要的是改变塌陷破发点。只需以下添加到您的CSS

@media(max-width:992px) {
.nav>li>a {
    padding-left: 10px;
    padding-right:10px
    }
}

bootply 。