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>

如何在小屏幕上和大屏幕上粘贴带菜单切换的通知图标？

1 个答案: