无法获得徽章以与导航栏中的链接对齐

Question

我无法弄清楚如何在导航栏中的链接旁边获取徽章并让它正确排列。

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

Answer 1

尝试将一个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;
}

Answer 2

不确定为什么你会想要链接在链接之外，因为整个链接变成了一个块。 将徽章设置为右侧的最佳方式与lostintranslation的答案类似，但不使用.badge-important使用.pull-right。

Answer 3

我所做的是将徽章作为列表元素放置：

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

这似乎对我有用。