7

ナビゲーション バーのリンクの横にバッジを表示し、正しく並べる方法がわかりません。

<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Link</a><span class="badge badge-important">4</span></li>

これが私の問題のJSFiddleの例です: http://jsfiddle.net/pHRc9/3/

4

3 に答える 3

5

a href の末尾をスパンの外側に配置してみてください。

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link <span class="badge badge-important">4</span></a></li>

更新された回答

あなたは質問でそれを指定しませんでした。既に存在するコードを使用して、この css を配置すると、うまくいきました。

a {
    float:left !important;
}
span {
    float: left !important;
    margin-top: 10px;
}
于 2013-02-16T05:02:01.097 に答える
2

リンク全体がブロックになるため、リンクの外側にバッジが必要な理由がわかりません。バッジを右側に配置する最良の方法は、Lostintranslationの回答に似ていますが、代わりに.badge-importantuseを使用します.pull-right。

于 2014-04-04T16:56:16.980 に答える
1

私がやっていることは、バッジをリスト要素として配置することです:

  %ul.nav.navbar-nav.navbar-right
    %li.navbar-text
      %span.badge boo
    %li.navbar-text
      %span.label.label-primary foo

それは私にとってうまくいくようです。

于 2014-03-04T10:41:31.337 に答える