無法獲得徽章以便與導航欄中的鏈接對齊

我無法弄清楚如何在導航欄中的鏈接旁邊獲取徽章並使其正確排列。無法獲得徽章以便與導航欄中的鏈接對齊

<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/

嘗試把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-16 05:02:01 thtsigma

但確實有效，但我並不想將徽章作爲鏈接的一部分 – lostintranslation 2013-02-16 05:06:46

已編輯的答案。我相信這應該起作用;當然，您希望更具體地引用錨點和跨度標記。 – thtsigma 2013-02-16 06:07:51

是看着引導CSS，他們只是在導航中的標籤指定樣式，沒有別的。因此，爲什麼在'a'標籤之外添加跨度看起來不正確。 – lostintranslation 2013-02-16 14:01:24

我做的是將徽章作爲列表元素：

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

這似乎爲我工作不錯。

2014-03-04 10:41:31 moskyt

不確定爲什麼你會希望鏈接外的徽章，因爲整個鏈接成爲一個塊。徽章向右移動的最佳方式類似於lostintranslation的回答，但不是使用.badge-important而是使用.pull-right。

2014-04-04 16:56:16 alans

回答