html - 如何在 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”>“a”元素是 block 元素。当我不使用右拉时，它可以工作……但显然我希望它们在右侧对齐。

有什么简单的方法吗？

这是一个 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 类。