CSS 적색 알림 풍선을 수정하는 방법

Question

트위터 부트 스트랩을 사용하여 만든 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 인 경우 전체 눈 모양 아이콘이 거품으로 숨겨집니다. left 대신 right와 배지

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

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