javascript – 使用bootstrap显示通知计数器

2019年8月4日 179次阅读

我想实现一个通知计数器,它会卷起来显示递增的数字.(就像谷歌通知谷歌一样)我不能溢出：隐藏工作.notif-surround.它的子元素(具有三个数字的元素)高度更大并且仍然可见.我希望它的适当部分可见.我怎么做？

jsfiddle demo

HTML

<div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="/">Name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="span6 offset1">
            <form class="navbar-form form-search">
              <div class="input-append">
                <input class="span4 search-query" type="text" placeholder="Search...">
                <button type="submit" class="btn">Search</button>
              </div>
            </form>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <span class="notif-surround"><span class="badge badge-info notif-background" >&nbsp;</span><span id="num_notif">0<br/>1<br/>2</span></span><b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li class="nav-header">Notifications</li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Messages</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <!-- <li><i class="icon-exclamation-sign icon-white"></i></li> -->
          <li class="dropdown">
            <img class="img-rounded img-profile inline" src="{{user['picture']['data']['url']}}" />
            <a href="#" class="dropdown-toggle profile-name" data-toggle="dropdown">{{user['name']}} <b class="caret"></b></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 class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

CSS

.notif-background{
    width:18px;
    height:14px;
}
#num_notif{
    position: relative;
    float: right;
    left: -38px;
    color: #fff;
    height:18px;

    bottom:20px;
}
.notif-surround{
    overflow:hidden;
}

最佳答案 在.notif-surround span上设置display：inline-block.

.notif-surround{
  overflow:hidden;
  display: inline-block;
}

问题是你不能设置隐藏在设置为display：inline的元素上的溢出,这是span的默认值,因为你不能设置它的宽度和高度.设置显示：块或显示：内联块修复此问题,第一个强制执行换行,后者使原始元素流保持不变.

点赞