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

Question

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

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