如何使引导项导航栏下拉列表项标记与右对齐? [英] How to make bootstrap navbar dropdown with list item badges aligned to the right?

问题描述

在徽章的文档中，徽章嵌套在 nav nav-pills下导航堆栈的类.

In the documentation for badges, the badge is nested under a nav nav-pills nav-stacked class.

但是我在使用徽章的导航栏中有一个下拉菜单.我认为这是因为在我应用 .pull-right .navbar 或 .dropdown-menu 或".nav-tabs"中.code>徽章，然后换行，这是我不希望的.

But I have a dropdown menu in a navbar that uses badges. I think it's because it's in a .navbar or a .dropdown-menu or a '.nav-tabs' that when I apply .pull-right to the badge, it wraps to a new line, which I don't want.

有人幸运地加入了下拉菜单，并在右侧向右侧获取了徽章吗?(拿那，碧昂丝的歌)

Has anyone had luck incorporating dropdown menus and getting badges to the right to the right? (take that, Beyonce song)

推荐答案

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

You align the badge right just as you would any element, for example we can use float:right. In the example that the Bootstrap website gave, the badges are in a <span> element. But we don't have to do that, for example we can add it in a <div>, then right-align that <div>. For example:

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

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

The dropdown menu could look something like this, for example:

<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

这篇关于如何使引导项导航栏下拉列表项标记与右对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！