1
我想弄清楚如何最好地在Bootstrap 3 RC2中獲得以下佈局。Bootstrap 3 RC2導航欄與多個崩潰
其中左側項目是主要導航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>
而且這工作正常的初始崩潰，但我需要更多的人，但現在他們需要住在同UL，這顯然與創建其他3個摺疊divs有關。
我甚至有代碼來切換崩潰，如果你說點擊搜索或購物車。它只會告訴你一次一個：打開一個閉等
// 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');
}
});
});
小和xs斷點應該表現出相同的佈局，但當然有一個圖標替換主導航。想法是，你有4個圖標，只需點擊或點擊切換各自的菜單，這些菜單是否包含一個列表或只是一個搜索表單。
有什麼建議嗎？
我喜歡你的想法它看起來很有希望！你能指定你的問題是什麼嗎？什麼是工作，什麼不是。我不指望你的導航檢查會起作用。首先'shown.bs.collapse'將被觸發而不是'show.bs.collapse'。其次，只需點擊摺疊元素即可觸發。你需要一個'$（'window'）。resize（）'這裏。 –
謝謝！所以這裏是主要問題： 我該如何處理圖標？ 目前，他們正在使用UL來顯示，但我不希望他們在每個開放下拉菜單中顯示這些鏈接的主要鏈接，作爲移動級別。所以也許我只是使用JQuery來隱藏錨點，但似乎應該有更好的方法。 我並不熱衷於在右邊的UL按鈕和鏈接。有沒有更好的方法來實現這一點？ –
至於JS，它似乎在切換按鈕時工作正常。顯示將僅在完全顯示之後應用，而Show會在另一個點擊時立即隱藏另一個。至於調整大小，它使用了navbar-collapse，所以它只發生在小斷點處，所以不需要調整大小，據我所知。 –