Bootstrap NavBar不像预期的那样崩溃 - 分成两行 [英] Bootstrap NavBar not collapsing as expected - separating onto two lines

问题描述

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

问题：

$ c>按预期收拢到一个按钮，但是当屏幕达到一定宽度时，我在 NavBar 内具有一定的宽度，菜单项分成两行。下面显示了这个问题：

这是导航栏，页面完全展开并按照需要工作：

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

这显示 NavBar 完全折叠： p>

代码：

这是我的 NavBar 标记。我看不出为什么我看到上面的不需要的行为， NavBar 分成两行：

 < div class =navbar navbar-fixed-top> 
< nav class =navbar navbar-defaultrole =navigationid =nav> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> 
< span class =sr-only>切换导航< / 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-collapseid =bs-example-navbar-collapse-1> 
< ul class =nav navbar-nav> 
< li>< a href =＃class =scroll-linkdata-id =Welcome>欢迎< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =features> Club< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =关于>关于我们< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =Gallery>图片库< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =委员会>委员会< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =Contact>联系我们< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =Location>位置< / a>< / li> 
< li>< a href ='@ Url.Action（FutureEvents，Events，new {pageNo = 1}）'> Events< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / nav> 
< / div> 
  

在解决这个问题方面有任何帮助，我们将不胜感激。

容器切换到750px，所以导航包装成2行屏幕宽度缩小。你有2个选项。

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

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

Question Background:

I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu.

The Issue:

The NavBarcollapses to a button as expected but when the screen hits a certain width the logo I have within the NavBarand the menu items split onto two separate lines. The following shows the issue:

This is the navbar with the page fully expanded and working as desired:

This is with the page slightly minimized and response, notice the NavBar has now split into two lines. This is not the desired behavior I want. I ideally I want the option to stay on the same line or collapse to a button:

This shows the NavBar fully collapsed:

The Code:

This is my NavBar markup. I cannot see why I'm seeing the above unwanted behavior with the NavBarseparating into two lines:

<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>

Any help in working out this issue would be appreciated.

解决方案

The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..

One option is to use the full width container-fluid (this may not work for your design): http://codeply.com/go/TfbwIivilI

Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best: http://codeply.com/go/kcaXYh7ARB

这篇关于Bootstrap NavBar不像预期的那样崩溃 - 分成两行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！