navbarのBootstrapラベルの正しいレイアウト

Question

未読メッセージの警告をBootstrapのNavbarに追加しようとしています。私はこのアラートをうまく整形する方法を見つけ出すことができました。しかし、<a>タグ内で正しくフォーマットする方法を理解できませんでした。

<ul class="nav navbar-nav"> 
    <li><a href="/Client/Details">Profile</a></li> 
    <li><a href="/Message">Message Trainer</a></li> 
    <li> 
     <a href="#"> 
      <span class="navbar-text label label-danger" style="color: white"> 
       1 
      </span> 
     </a> 
    </li> 
</ul> 

このレイアウトは次のようになります。

私も<a>要素に私の<span>要素に現在のCSSクラスを移動しようとした（とスパンを除く）が、それははるかに悪化しました。

これをサポートするためのブートストラップの既存の方法はありますか、それともカスタムスタイルだけで済むのですか？

Answer 1

CSSクラスを削除してください：.navbar-text;

結果：JsBin上

<span class="label label-danger" style="color: white"> 
    1 
</span> 

ビュー：https://jsbin.com/bugakey/edit?output

alert("View the example on a large screen so that the <nav> elements are displayed inline")

<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
    
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="/Client/Details">Profile</a></li> 
 
    <li><a href="/Message">Message Trainer</a></li> 
 
    <li> 
 
     <a href="#"> 
 
      <span class="label label-danger " style="color: white"> 
 
       1 
 
      </span> 
 
     </a> 
 
    </li> 
 
</ul>