Twitter bootstrap 如何在小屏幕上持续显示通知数量

让我解释一下我的意思。在中等屏幕上，顶部导航栏如下所示：

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

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

其中“10”是通知数，基本上是一个下拉菜单，单击时显示最近的通知

在小屏幕上，我希望菜单如下所示：

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

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

其中“| | |”是显示
设置帐户主页 单击时，“10”的角色与之前相同

据我从引导示例中学到的，所有“10个设置帐户主页”都将进入折叠按钮。我能想到的一个解决方案是使用两个单独的通知按钮，并使用媒体查询显示/隐藏它们。但在这种情况下，我还应该有两个单独的菜单（包含最近的通知），这对我来说并不明智。

---

如果你能给我一些想法来实现我的目标，我将不胜感激

实现这一点的一种方法是从navbar collapse中删除不希望折叠的导航片段，并将其放在navbar品牌的正下方，然后使用navbar链接类。见下面的代码：

  <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>

切换导航

---

请参阅非导航链接：。

谢谢，此解决方案的唯一问题是，在中等屏幕上，通知将更接近导航栏品牌，而不是其他导航链接。