使用bootstrap显示通知计数器

Question

我想实现一个通知计数器，该计数器汇总显示增加的数字。（就像谷歌+通知中的一个谷歌节目）我无法让overflow:hidden为.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;
}

Answer 1

在display: inline-block .notif-surround上设置span。

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

问题在于，您无法设置隐藏在设置为display: inline的元素上的溢出，这是span的默认值，因为您无法设置其宽度和高度。设置display: block或display: inline-block会修复此问题，第一个会在自身之后强制换行，而后者会保留原始元素流。