css - 如何使列表项徽章右对齐的 Bootstrap 导航栏下拉列表？

Question

在 badges 的文档中, 徽章嵌套在 nav nav-pills nav-stacked 下类。

但我在使用徽章的导航栏中有一个下拉菜单。我认为这是因为它在 .navbar 中或 .dropdown-menu或当我申请 .pull-right 时的“.nav-tabs”到徽章，它会换行，这是我不想要的。

有没有人幸运地合并了下拉菜单并将徽章放在右边？ (拿那个，碧昂斯的歌)

Answer 1

您可以像对齐任何元素一样正确对齐徽章，例如我们可以使用 float:right .在 Bootstrap 网站给出的示例中，徽章位于 <span> 中。元素。但我们不必这样做，例如我们可以将它添加到 <div> 中。 , 然后右对齐 <div> .例如:

<div style="float:right" class="badge">42</div>

下拉菜单可能看起来像这样，例如:

<ul class="dropdown-menu" role="menu">
    <li><a href="#">
        <div style="float:left">Stuff</div>
        <div style="float:right" class="badge">42</div>
        <div style="clear:both"></div>
        </a>
    </li>
    <li><a href="#">Hello World</a></li>
</ul>

Here is a Fiddle example