在移动视图中显示通知窗口

Question

在我的应用程序中，我有一个显示最新消息的通知弹出窗口，我的示例没有显示打开，但这不是对话的主要部分，问题是，当我调整窗口大小时，通过按钮链接即使在移动设备中，也应该始终显示正确消失的铃声通知。 切换菜单应该出现，但在移动视图中，铃声链接菜单通知应出现在他身边。

我的HTML代码有什么问题？我正在使用bootstrap

例：https://codepen.io/anon/pen/mmxQwO?editors=1010

HTML：

 <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
              <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown ng-isolate-scope">
    <a id="dLabel" role="button" class="icon-wrapper" data-toggle="dropdown" ng-click="notificationCtrl.updateDateTime()" data-target="#">
        <i class="fa fa-bell-o"><span class="badge-notification ng-binding ng-hide" ng-show="notificationCtrl.nrNotifications > 0"> 0</span></i>

        <div class="clearfix"></div>
    </a>

    <ul class="dropdown-menu notifications" role="menu" aria-labelledby="dLabel">

        <li class="dropdown-header">
            Notificações
        </li>


        <div class="notifications-wrapper">
            <!-- ngRepeat: notification in notificationCtrl.notifications | limitTo: 5 --><a ng-repeat="notification in notificationCtrl.notifications | limitTo: 5 " class="content ng-scope" href="">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 notification-grid item-title notification-item">


                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 notification-grid">
                        <!-- USER -->
                        <strong class="ng-binding"></strong>

                        <!-- ngIf: notification.operation == 'first_register' -->



                        <!-- NOTIFICAÇÔES -->


                        <div>
                            <i class="fa fa-clock-o"><span class="item-info ng-binding"> há 2 meses atrás</span></i>
                        </div>
                    </div>
                </div>
            </a><!-- end ngRepeat: notification in notificationCtrl.notifications | limitTo: 5 --><a ng-repeat="notification in notificationCtrl.notifications | limitTo: 5 " class="content ng-scope" href="">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 notification-grid item-title notification-item">



                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 notification-grid">
                        <!-- USER -->

                            <i class="fa fa-clock-o"><span class="item-info ng-binding"> há 2 meses atrás</span></i>
                        </div>
                    </div>
                </div>
            </a>

        </div>


    </ul>

</li>
                    </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>