如何在Bootstrap下拉菜单中的右侧内嵌徽章？

Question

我有一个像这样的Bootstrap下拉菜单：

<div class="dropdown btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Foo <span class="badge pull-right">63</span></a></li>
        <li><a href="#">Bar <span class="badge pull-right">12</span></a></li>
    </ul>
</div>

我正在尝试在每个项目的右侧获得一个“徽章”计数器，但不知何故它总是跳到下一行。我认为这是因为下拉列表“li”＆gt; “a”项是块项。当我不使用右拉时，它可以工作......但显然我希望它们在右侧对齐。

有没有简单的方法呢？

这是一个jsfiddle：http://jsfiddle.net/BqKNV/392/

Answer 1

.dropdown-menu > li > a {
    position:relative;
}
.dropdown-menu > li > a > .badge {
    position:absolute;
    right:5px
}

将position:relative添加到.dropdown-menu > li > a。

从徽章中删除pull-right课程。