如何修复css红色通知泡泡

Question

我有一个Html Like follow，我使用twitter bootstrap创建。

<div class="row-fluid" style="padding-top:10px;">
    <div class="noti_bubble"><@= friendRequestCollection.size() @></div>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="icon-eye-open icon-white"></i>
          <span class="caret"></span> 
    </a>
    <ul class="dropdown-menu">
        <@ friendRequestCollection.each(function(user) { @>
            <li id="user-list-<@= user.get('username') @>"><a href="#"><@= user.get('firstName') @></a></li>
        <@ }); @>
    </ul>
 </div>

我正在尝试在眼睛图标上创建一个红色通知气泡，但看起来并不那么好。

我的css通知泡沫。

.noti_Container {
position: relative;
/* This is just to show you where the container ends */
width: 16px;
height: 16px;
cursor: pointer;
  }

  .noti_bubble {
position: absolute;
top: 2px;
right: 10px;
background-color: red;
color: white;
font-weight: bold;
font-size: 14px;
border-radius: 2px;
}

我想要的是隐藏由红色气泡引导的小箭头，当气泡数量增加时，气泡大小必须增加右侧。目前它在左侧增加，所以如果气泡内的数字为100，那么整个眼睛图标就会被气泡隐藏起来。

Answer 1

使用left代替right：

定位徽章

.noti_bubble {
    position: absolute;
    top: 2px;

    /* this will anchor your badge from its left-hand edge at the midpoint of your icon */
    left: 8px;

    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 14px;
    border-radius: 2px;
}

Answer 2

要解决日益严重的问题，只需将.noti_bubble CSS更改为：

.noti_bubble {
   position: relative;
   display:inline-block;
   top: 2px;
   left: 25px;
   background-color: red;
   color: white;
   font-weight: bold;
   font-size: 14px;
   border-radius: 2px;
}