css - 如何修复CSS红色通知气泡

Question

我有一个 Html Like，它是我使用 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;
}

我想要的是用红色气泡隐藏 Bootstrap 创建的小箭头，当气泡中的数字增加时，气泡大小必须增加右侧。目前它在左侧增加，所以如果气泡内的数字是 100，那么整个眼睛图标就会隐藏在气泡中。

Answer 1

将徽章放置在左而不是右:

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