我一直在看這個以前問一個問題:將多個Bootstrap菜單合併爲一個用於移動設備?
Consolidate Multiple Bootstrap 3 navbar menus on collapse
,它提供了一個很好的解決這個問題,你可以在this fiddle
的問題看到的是,我目前這個佈局解決方案並不完美。這裏是如何顯示:
它適用於另一種情況,我想,但我的情況下,頂部導航欄將顯示:無移動這樣只會出現在頁面上的單一導航欄和一次一個用戶點擊切換按鈕,這是不理想的,使標誌位於新菜單的中間,並在頁面的中間切換。
是否有可能確實有類似的最終顯示:
我有充分的機會來改變HTML的結構或增加任何額外的JavaScript,但我無法改變標誌的設計在第二個導航欄上。
當前HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a> </li>
</ul>
<div class="navbar-right">
<select><option>My Portfolio</option></select>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="navbar-right" role="search">
<ul class="nav navbar-nav">
<li><a href="#">Stuff</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>