Question

问题背景：

我在我的网站上使用Twitter Bootstrap，并为我的网站菜单添加了一个collpasing导航栏。

问题：

NavBar按预期折叠到按钮，但当屏幕达到某个宽度时，我在NavBar内的徽标和菜单项分成两个单独的行。以下显示了问题：

这是导航栏，页面完全展开并按需运行：

enter image description here

这是页面略微最小化和响应，请注意NavBar现在已分为两行。这不我想要的行为。理想情况下，我希望选项保持在同一条线上或折叠为按钮：

enter image description here

这表示NavBar已完全崩溃：

enter image description here

守则：

这是我的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行，因为您有许多菜单项，并且随着屏幕宽度缩小，Bootstrap container切换到750px。你有两个选择..

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

另一种选择是减少导航栏折叠的点。这需要CSS覆盖默认的导航栏折叠点。在你的情况下，大约1000px似乎效果最好： http://codeply.com/go/kcaXYh7ARB

Answer 2

它发生的原因是你有很多li元素，所以你需要的是改变崩溃断点。只需将以下内容添加到您的CSS

即可

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

bootply

Bootstrap NavBar没有按预期折叠 - 分成两行

2 个答案: