如何在小屏幕上顯示通知數量

Question

讓我解釋一下我的意思。在中等屏幕，頂部導航欄應該是這樣的：

========================================================= 
Logo       10 Settings Account Home 
========================================================= 

其中「10」是通知的數量，是bascially，顯示近期通知時，點擊下拉菜單。

在小屏幕上，我希望菜單是這樣的：

============== 
Logo 10 ||| 
============== 

其中 「|||」是點擊時顯示
設置帳戶主頁 的摺疊按鈕，「10」與以前具有相同的作用。

據我從引導示例中瞭解到，「10設置帳戶主頁」中的所有內容都將進入摺疊按鈕。我能想到的一個解決方案是有兩個單獨的通知按鈕，並使用媒體查詢來顯示/隱藏它們。但在這種情況下，我還應該有兩個單獨的菜單（包含最近的通知），這對我來說看起來並不聰明。 我很感激，如果你能給我任何想法來實現我在找的東西。

Answer 1

實現此目的的一種方法是從導航欄摺疊中移除您不希望摺疊的導航片段，並將其置於導航欄品牌的正下方並使用導航欄鏈接類別。請參閱下面的代碼：

<div class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" 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="#">Project name</a> 
    <p class="navbar-text navbar-left"><a href="#" class="navbar-link">10</a></p> 
    </div> 

    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Settings</a></li> 
     <li><a href="#">Accounts</a></li> 
     <li><a href="#">Home</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 

查看非導航鏈接：http://getbootstrap.com/components/#navbar-links。