Twitter Bootstrap：仅将某些菜单项折叠到下拉列表中 [英] Twitter Bootstrap: Collapse only certain menu items into drop-down
问题描述
我想知道如何在调整浏览器窗口大小时创建一个Twitter Bootstrap navbar ，它会折叠该菜单中的项目，一次或两个项目。
I'm wondering how to create a Twitter Bootstrap navbar that collapses items in that menu, one or two items at a time upon resizing the browser window.
我看到的大多数导航栏将整个导航栏折叠成一个下拉列表;当窗口调整大小时，基本上将所有内容都隐藏在导航栏上。但我需要它仍然显示一些菜单项;所以是部分崩溃。
Most navbars I've seen have collapsed the entire navbar into one drop-down; basically hiding everything on that navbar when the window is resized. But I need it to still reveal some menu items; so a partial collapse.
以下是我的意思（下面的菜单）的例子：
Here's an example of what I mean (menu below):
首页|关于|服务|订单|联系人
Home | About | Services | Order | Contact
当浏览器窗口从右侧调整大小时，我想要做的是将最后一个菜单项（或两个）放入下拉列表中，它将如下所示：
When the browser window is resized from the right, what I want it to do is to put the last menu item (or two) into a drop-down so then it would look like this:
首页|关于|服务|更多
Home | About | Services | More
-> Order
-> Contact
'更多'需要自动创建为下拉菜单，它会自动列出'在该下拉菜单中的订购和联系菜单项。并且随着窗口越来越小，导航栏中的更多项将被添加到该下拉菜单中。当浏览器窗口调整为全屏宽度时，导航条恢复正常。这是需要的。
'More' would need to automatically be created as a drop-down menu and it automatically list 'Order' and 'Contact' menu items in that drop-down menu. And as the window gets smaller more items in that nav bar would be added to that drop-down menu. And when the browser window is resized to full screen width, then the navbar goes back to normal. This is what is needed.
在我看过的许多链接中，我发现了几个链接（不会将整个导航栏敲入一个下拉菜单），但仍然像所有其他不做我所描述的那样：
Of the many links I've looked at, here's a couple of links I've found (that does not knock the whole navbar into one drop-down menu) but still like all the others it does not do what I described:
- http://jsfiddle.net/caio/gvw7j/embedded/result/
- Twitter Bootstrap Multilevel Dropdown Menu
使用上述任何示例实现我需要的最佳方式是什么？
What is to the best way to achieve what I need using any example above?
推荐答案
首先，确定哪些导航项目应该在每个宽度断点处消失。然后，添加正确的hidden- *类以根据当前断点隐藏导航项。
First, determine which nav items should "disappear" at each width breakpoint. Then, add the correct hidden-* classes to hide the nav items based on the current breakpoint.
我的解决方案要求您复制一些导航项，可见性，使用hidden- *类，以便它们仅在适当的宽度断点显示。
My solution requires that you duplicate some of the nav items, but set their visibility, using the hidden-* classes, so that they show only at the appropriate width breakpoint.
基本上，当使浏览器更窄时，导航项将被隐藏主导航栏和相关的导航项目将显示在下拉列表中。我的示例将导航项目隐藏在四个默认宽度断点中的每一个上。
Basically, when making the browser narrower, a nav item will be hidden from the main navbar, and the related nav item will be displayed in the dropdown. My example has nav items being hidden at each of the four, default width breakpoints.
<nav class="navbar navbar-default navbar-static-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">Brand Name</a>
</div>
<div id="navbar-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--- Include all menu items, below, regardless of display width. --->
<!--- This allows the full menu to be displayed on extra-small (xs) devices. --->
<!--- Hide menu items depending on the available display width. --->
<li><a href="/calendar/">Calendar</a></li>
<li><a href="/journal/">Journal</a></li>
<li><a href="/shows/">Shows</a></li>
<li><a href="/venues/">Venues</a></li>
<!--- Hide the following menu items depending on the available display width. --->
<!--- Menu items that can't fit on the main nav bar will be displayed in the "More" dropdown menu. --->
<li class="hidden-sm"><a href="/blackouts/">Blackouts</a></li>
<li class="hidden-sm"><a href="/tasks/">Tasks</a></li>
<li class="hidden-sm hidden-md"><a href="/songs/">Songs</a></li>
<li class="hidden-sm hidden-md"><a href="/testimonials/">Testimonials</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/artists/">Artists</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/categories/">Categories</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/cities/">Cities</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/reports/">Reports</a></li>
<li class="hidden-sm hidden-md hidden-lg"><a href="/users/">Users</a></li>
<!--- The "More" dropdown menu item will be hidden on extra-small displays. --->
<li class="dropdown hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="hidden-lg hidden-md"><a href="/blackouts/">Blackouts</a></li>
<li class="hidden-lg hidden-md"><a href="/tasks/">Tasks</a></li>
<li class="hidden-lg"><a href="/songs/">Songs</a></li>
<li class="hidden-lg"><a href="/testimonials/">Testimonials</a></li>
<li class="divider hidden-lg"></li>
<!--- These menu items will only appear in the "More" dropdown menu. --->
<li><a href="/artists/">Artists</a></li>
<li><a href="/categories/">Categories</a></li>
<li><a href="/cities/">Cities</a></li>
<li><a href="/reports/">Reports</a></li>
<li><a href="/users/">Users</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/?signout" id="signout"><span class="glyphicon glyphicon-lock"></span> Sign Out</a></li>
</ul>
</div>
</div>
这篇关于Twitter Bootstrap：仅将某些菜单项折叠到下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
