如何在小屏幕上粘貼菜單菜單中的通知圖標，並在大屏幕上粘貼菜單圖標？

Question

我試圖粘貼通知子菜單以在小屏幕上切換菜單，並在小屏幕上向右粘貼，如下所示

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed pull-left"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#about">Abount</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <ul class="nav"> <li class="dropdown dropdown-list"> <a href="javascript:;" data-toggle="dropdown" dropdown-animate="" aria-haspopup="true" class="dropdown-toggle"> <i class="glyphicon glyphicon-bell"></i> <span class="label label-danger">11</span> </a> </li> </ul> </nav> 

但不幸的是，它不起作用。 請幫我怎么辦？

Answer 1

為了使通知始終可見，您可以將它們添加到nav-header如下所示：

<div class="navbar-header">
  <button class="navbar-toggle collapsed">...</button>

  <div class="nav navbar-brand pull-right">
      <a href="#" >
        <i class="glyphicon glyphicon-bell"></i>
        <span class="label label-danger">11</span>
      </a>
  </div>

</div>

 .notifications.navbar-brand { font-size: 14px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" > <div class="container"> <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> <div class="nav navbar-brand pull-right notifications"> <a href="#" > <i class="glyphicon glyphicon-bell"></i> <span class="label label-danger">11</span> </a> </div> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#about">Abount</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav>