具有多个折叠的Bootstrap 3 RC2导航栏 [英] Bootstrap 3 RC2 Navbar with Multiple Collapses
问题描述
我试图弄清楚如何最好地在Bootstrap 3 RC2中获得以下布局.
I'm trying to figure out how best i can get the following layout in Bootstrap 3 RC2.
其中左边的项目是主要的导航UL，侧面的图标是附加的UL或只是一组具有共同外观的链接，但是提供了其内容的下拉菜单或隐藏/显示切换(组，但希望为其他用户进行交互式搜索和购物车展示.)
Where the left items are the primary nav UL, and the side icons, are an additional UL or just a set of links that share a common look, but provide a dropdown or hide/show toggle for their content (list for the group, but hoping to do an interactive search and cart display for the others).
当前，当我执行以下代码时，这可以正常运行:
Currently, this plays fine when i do this code:
<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>
这对于最初的折叠效果很好，但是我需要其他的，但是目前它们需要使用相同的UL，这显然会导致创建其他3个折叠div产生问题.
And this works fine for the initial collapse, but i need additional ones, but currently they need to live in the same UL, which obviously makes an issue with creating the 3 other collapse divs.
如果您说单击搜索或购物车，我什至也具有切换折叠的代码.一次只会显示一个:打开一个然后关闭另一个
I even have the code to toggle the collapses if you say click on search or cart. It will only show you one at a time: opening one and closing the other
// 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');
}
});
});
small和xs断点应该显示相同的布局，但是当然用图标替换主导航.想法是您有4个图标，只需单击或点击即可切换它们各自的菜单，无论这些菜单是包含列表还是仅包含搜索表单.
The small and xs breakpoints should show the same layout, but of course replace the primary nav with an icon. Idea is that you have 4 icons to simply click or tap to toggle their respective menus, whether those menus contain a list or just a search form.
有什么建议吗?
推荐答案
我认为我制造的NAVBAR与您要寻找的非常接近.我以前已经发布了这个答案，但是它很好地适用于您的问题.
I think this NAVBAR i made is very close to what you're looking for. I've posted this answer before, but it applies to your question very well.
此示例显示了如何具有您可能需要的几乎所有类型的香草引导程序" NAVBAR配置.它包括网站标题，向左或向右对齐的折叠和非折叠菜单项以及静态文本.该示例还具有一个带图标的下拉菜单.
This example shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. The example also has a drop-down menu with an icon.
请务必阅读注释，以更全面地了解您可以更改的内容.享受吧！
Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
提琴: http://jsfiddle.net/nomis/n9KtL/1/
<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>
这篇关于具有多个折叠的Bootstrap 3 RC2导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
