ブートストラップラベルがスペースを奪ってシフトするのを防ぐ方法

私は通知アイコン付きのナビゲーションバーを持っています。通知があると、アイコンの横にラベルが表示されます。しかし、このラベルによってコンテナが大きくなり、Navbarのすべてがシフトします。私はnavbarにflexboxを使用しています。ここでブートストラップラベルがスペースを奪ってシフトするのを防ぐ方法

は、私のコードの基本的な例です。

HTML

<ul class="flex-nav"> 
    <li class="flex-item"> 
    link 
    </li> 
    <li class="flex-item"> 
    linklink 
    </li> 
    <li class="flex-item"> 
    <i class="fa fa-bell fa-lg flex-icon"></i> 
    <span class="label label-danger label-as-badge">5</span> 
    </li> 
    <li class="flex-item"> 
    link 
    </li> 
    <li class="flex-item"> 
    linklinklink 
    </li> 
    <li class="flex-item"> 
    link 
    </li> 
</ul>

CSS

.flex-nav { 
    display: flex; 
    list-style: none; 
    background-color: red; 
    height: 56px; 
    width: 300px; 
    margin: 0 auto; 
} 

.flex-item { 
    border: 1px solid black; 
    text-align: center; 
    display: flex; 
    flex: 1 0 auto; 
    justify-content: center; 
    align-items: center; 
} 

.flex-icon { 
    text-decoration: none; 
    align-items: center; 
} 

.label-as-badge { 
    border-radius: 1em; 
    position: relative; 
    top: -10px; 
    left: -10px; 
} 

.label { 
    display: inline; 
    padding: .2em .6em .3em; 
    font-size: 75%; 
    font-weight: bold; 
    line-height: 1; 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: baseline; 
    border-radius: .25em; 
} 

.label:empty { 
    display: none; 
} 


}

フィドル

https://jsfiddle.net/weuce4du/3/

あなたは5を削除し、通知アイコンが入っている箱の大きさに何が起こるか見て、私が何を意味するか見ることができます。

同じサイズを通知コンテナを維持する方法があり、維持ベルアイコンが中央に配置され、ラベルがスペースを奪ってナビバーにシフトを起こさないようにしますか？私はzインデックスを使ってあらゆるものの上に座ることができると思っていましたが、動作していないようです。

更新：私が思いついた唯一のことは、コンテナに最大幅を設定することです。アイコンはやや動いていますが、他のナビゲーションリンクが移動することはありません。

出典

2016-05-25 user4584963