14

我想知道如何创建一个 Twitter Bootstrapnavbar来折叠该菜单中的项目，在调整浏览器窗口大小时一次折叠一个或两个项目。

我见过的大多数导航栏都将整个导航栏折叠成一个下拉菜单；调整窗口大小时，基本上隐藏该导航栏上的所有内容。但我仍然需要它来显示一些菜单项；所以局部崩溃。

这是我的意思的一个例子（下面的菜单）：

主页 | 关于 | 服务 | 订购 | 接触

当浏览器窗口从右侧调整大小时，我想要它做的是将最后一个菜单项（或两个）放入下拉列表中，因此它看起来像这样：

主页 | 关于 | 服务 | 更多的

                    -> Order
                    -> Contact

“更多”需要自动创建为下拉菜单，并在该下拉菜单中自动列出“订单”和“联系”菜单项。随着窗口变小，导航栏中的更多项目将添加到该下拉菜单中。当浏览器窗口调整为全屏宽度时，导航栏恢复正常。这是需要的。

在我查看过的许多链接中，我发现了几个链接（不会将整个导航栏撞到一个下拉菜单中），但仍然像所有其他链接一样，它没有按照我的描述进行：

  1. http://jsfiddle.net/caio/gvw7j/embedded/result/
  2. Twitter Bootstrap 多级下拉菜单

使用上面的任何示例来实现我需要的最佳方法是什么？

4

1 回答 1

11

首先，确定哪些导航项应该在每个宽度断点处“消失”。然后，添加正确的 hidden-* 类以根据当前断点隐藏导航项。

我的解决方案要求您复制一些导航项，但使用 hidden-* 类设置它们的可见性，以便它们仅在适当的宽度断点处显示。

基本上，当浏览器变窄时，一个导航项将从主导航栏中隐藏，相关的导航项将显示在下拉列表中。我的示例在四个默认宽度断点中的每一个处都隐藏了导航项。

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

于 2014-06-16T21:16:15.633 回答