使用引导显示通知计数器 [英] Show notification counter with bootstrap

问题描述

我想实现一个通知计数器，它会显示递增的数字（就像谷歌+通知中显示的一个一样）我无法获得 overflow：hidden to为 .notif-surround 工作。它的子元素（具有三个数字的元素）的高度较大，仍然可见。我希望它的适当部分可见。我该怎么做？

jsfiddle演示

html

 < div id =top_navbarclass = navbar navbar-inverse navbar-fixed-top> 
< div class =navbar-inner> 
< div class =container> 
< button type =buttonclass =btn btn-navbardata-toggle =collapsedata-target =。nav-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =brandhref =/>名称< / 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-querytype =textplaceholder =Search ...> 
< button type =submitclass =btn>搜寻< / button> 
< / div> 
< / form> 
< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>主页< span class =notif-surround>< span class = info notif-background>& nbsp;< / span>< span id =num_notif> 0< br /> 1< / /> 2< / span>< / span>< b class =caret>< / b>< / a> 
< ul class =dropdown-menu> 
< li class =nav-header>通知< / li> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li class =divider>< / li> 
< li class =nav-header>邮件< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
<！ - < li>< i class =icon-exclamation-sign icon-white>< / i>< / li> - > 
< li class =dropdown> 
  < ul class =dropdown-menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li class =divider>< / li> 
< li class =nav-header> Nav header< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / div> 
< / div> 
  

css

  .notif-background {
 width：18px; 
 height：14px; 
} 
 #num_notif {
 position：relative; 
 float：right;剩余
：-38px; 
颜色：#fff; 
 height：18px; 
 
 bottom：20px; 
} 
 .notif-surround {
 overflow：hidden; 
 
  

解决方案

设置 display：inline-block .notif-surround span 。

  .notif-surround {
 overflow：hidden; 
 display：inline-block; 
 
 
 
 
 
 $ b 
问题是你不能设置隐藏在元素上的溢出设置为 display：inline ，这是 span 的默认值，因为您无法设置其宽度及其宽度高度。设置 display：block 或 display：inline-block 修复了这个问题，第一个在它自身之后强制换行，后者保留了元素的原始流程。 
I want to implement a notification counter which rolls up to show incremented number.(Like the one google shows with google+ notifications) I can't get overflow:hidden to work for .notif-surround. Its child element's(the one with three numbers) height is larger and still it's visible. I want its appropriate portion to be visible. How do I do that?

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;
}

解决方案
Set display: inline-block on the .notif-surround span.
.notif-surround{
  overflow:hidden;
  display: inline-block;
}
The problem is that you can't set overflow hidden on an element which is set as display: inline, which is the default for a span, as you can't set its width and its height. Setting display: block or display: inline-block fixes this, with the first forcing a line break after itself, and the latter leaving the original flow of elements intact.

                        
这篇关于使用引导显示通知计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！