Question

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

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

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

在小屏幕上，我希望菜单是这样的：

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

其中“|||”是折叠按钮，显示
设置帐户主页单击时，“10”具有与以前相同的角色。

据我从bootstrap示例中了解到，所有“10 Settings Account Home”都将进入折叠按钮。我能想到的一个解决方案是使用两个单独的通知按钮，并使用媒体查询显示/隐藏它们。但在这种情况下，我还应该有两个单独的菜单（包含最近的通知），这对我来说似乎并不聪明。如果你能给我任何想法来实现我正在寻找的东西，我感激不尽。

Answer 1

实现此目的的一种方法是从导航栏折叠中删除您不希望折叠的导航，并将其放在导航栏品牌下方并使用navbar-link类。请参阅以下代码：

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

如何在小屏幕上显示通知数量

1 个答案: