Twitter bootstrap 带多个折叠的Bootstrap 3 RC2导航栏

我正试图找出如何在Bootstrap3RC2中获得以下布局

其中，左侧项目为主要导航UL，侧边图标为附加UL或一组链接，它们共享一个共同外观，但为其内容提供下拉或隐藏/显示切换（组列表，但希望为其他组执行交互式搜索和购物车显示）

目前，当我执行以下代码时，效果很好：

<div class="nav-wrapper" style="height: 56px;">
        <div class="nav-primary affix-top">
            <nav class="navbar" role="navigation">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">


                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-primary-collapse">
                            <span class="sr-only">Primary navigation</span>
                            <i class="icon-list"></i>
                        </button>

                        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-cart-collapse">
                            <span class="sr-only">Itinerary navigation</span>
                            <span class="icon-calendar-empty"></span>
                        </button>

                        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-user-collapse">
                            <span class="sr-only">User navigation</span>
                            <span class="icon-user"></span>
                        </button>

                        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-search-collapse">
                            <span class="sr-only">Search navigation</span>
                            <span class="icon-search"></span>
                        </button>
                    </div>

                    <div class="row">
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="col-lg-8 col-sm-8 navbar-collapse navbar-primary-collapse in" style="height: auto;">

            <ul id="navPrimary" class="nav navbar-nav">

        <li class="first" id="navRegions"><a href="/regions/">Regions</a></li>

        <li id="navWineries"><a href="/wineries/">Wineries</a></li>

        <li id="navExplore"><a href="/explore/">Explore</a></li>

        <li class="last" id="navEvents"><a href="/events/">Events</a></li>
        </ul> 
                      </div><!-- /.navbar-primary-collapse -->

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="col-lg-4 col-sm-4 pull-right collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="#"><i class="icon-search"></i></a>
                                    <div id="prime-nav-searchform" class="dropdown-menu">   <form method="get" action="http://antonibotev.com/themes/nova/" class="search-form">
                                            <i class="icon-search searchform-icon"></i>
                                            <input class="bluebox-search-input" type="text" name="s" value="Search..." onfocus="" onblur="" autocomplete="off" data-view-all-title="Show All Results" data-original-title="">
                                            <input type="submit" class="submit" value="" onfocus="" onblur="">
                                            <div class="search-form-autocomplete active">
                                                <div class="search-results-autocomplete">

                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </li>
                                <li class="dropdown"><a href="#" class="dropdown-toggle"><i class="icon-user"></i>  <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Log In</a></li>
                                        <li><a href="#">Sign Up</a></li>
                                        <li><a href="#">How It Works</a></li>
                                        <li><a href="#">Need Help?</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-calendar-empty"></i> <span>4</span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">View Itinerary</a></li>
                                        <li><a href="#">Check Out</a></li>
                                        <li><a href="#">Need Help?</a></li>
                                    </ul>
                                </li>
                            </ul>
                      </div><!-- /.navbar-collapse -->
                    </div>



                </div>
            </nav>
        </div>
    </div>

小断点和xs断点应该显示相同的布局，但当然用图标替换主nav。这个想法是，您有4个图标，只需单击或点击即可切换各自的菜单，无论这些菜单包含列表还是仅包含搜索表单

---

有什么建议吗？

我想我制作的导航栏与您想要的非常接近。我以前发布过这个答案，但它非常适用于你的问题

这个例子展示了如何拥有你想要的任何类型的“普通引导”导航栏配置。它包括站点标题、左对齐或右对齐的折叠和非折叠菜单项以及静态文本。该示例还有一个带有图标的下拉菜单

请务必阅读评论，以便更全面地了解您可以更改的内容。享受吧

小提琴：

用户名









切换导航

我喜欢你的想法，它看起来很有前途！你能具体说明你的问题是什么吗？什么有效，什么无效。我不希望你的导航条检查会起作用。首先将触发

show.bs.collapse

，而不是

show.bs.collapse

。其次，它只是在单击正在折叠的元素时触发的。您需要一个

$（'window'）。请在此调整大小（）

。谢谢！所以这里是主要的问题：我如何处理图标？目前，他们正在使用UL来显示，但我不希望他们在每个打开的下拉列表中以移动级别显示这些内容的主要链接。也许我只是用JQuery来隐藏锚，但似乎应该有更好的方法。我也不喜欢在右边有UL的按钮和链接。有没有更好的方法来实现这一点？至于JS，在切换按钮时，它似乎工作得很好。“显示”仅在其完全显示后应用，而“显示”将在单击另一个后立即隐藏另一个。至于调整大小，它使用的是导航栏折叠，因此它只发生在小断点处，所以据我所知，不需要调整大小。好的，谢谢。也许您应该考虑：为移动和更大的屏幕构建不同的视图（导航栏）。

// mobile toggles - make sure when one navbar-collapse is open, that the others are closed
$('.navbar-collapse').on('show.bs.collapse', function (e) {
    // hide open menus
    $('.navbar-collapse').each(function(){
        if ($(this).hasClass('in')) {
            $(this).collapse('toggle');
        }
    });
});

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <!-- Title -->
    <div class="navbar-header pull-left">
      <a href="/" class="navbar-brand">GNOMIS</a>
    </div>

    <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
    <div class="navbar-header pull-right">
      <ul class="nav pull-left">
        <!-- This works well for static text, like a username -->
        <li class="navbar-text pull-left">User Name</li>
        <!-- Add any additional bootstrap header items.  This is a drop-down from an icon -->
        <li class="dropdown pull-right">
          <a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <a href="/users/id" title="Profile">Profile</a>
            </li>
            <li>
              <a href="/logout" title="Logout">Logout </a>
            </li>
          </ul>
        </li>
      </ul>

      <!-- Required bootstrap placeholder for the collapsed menu -->
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>

    <!-- The Collapsing items            navbar-left or navbar-right -->
    <div class="collapse navbar-collapse navbar-left">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav pull-right">
        <li><a href="/news">News</a></li>
        <li><a href="/Shop">Shop</a></li>
      </ul>
    </div>

    <!-- Additional navbar items -->
    <div class="collapse navbar-collapse navbar-right">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav pull-right">
        <li><a href="/locator">Locator</a></li>
        <li><a href="/extras">Extras</a></li>
      </ul>
    </div>
  </div>
</nav>