navbarのリンクの隣にバッジを付けて正しく整列させる方法がわかりません。ここでnavbarのリンクでバッジを整列することができません
<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/
は、スパンの近くの外の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;
}
は、リストの要素としてバッジを配置することです：
%ul.nav.navbar-nav.navbar-right
%li.navbar-text
%span.badge boo
%li.navbar-text
%span.label.label-primary foo
私のための素晴らしい仕事に思われます。
なぜリンク全体がバックグラウンドになるので、そのバッジをリンクの外にしたいのかはわかりません。 バッジを右に持っている最善の方法は、lostintranslationの回答と似ていますが、.badge-importantの代わりに.pull-rightを使用します。
しかし、私は実際にバッジをリンクの一部にしたくありません – lostintranslation
編集された答え。私はこれがうまくいくと思う。もちろん、アンカータグとスパンタグをより具体的に参照したいと思うでしょう。 – thtsigma
はい、ブートストラップCSSを見ると、nav内のタグのスタイルだけを指定しているだけです。したがって、なぜ 'a'タグの外側にスパンを追加するのが正しくないのでしょうか。 – lostintranslation