如何使用右侧对齐的列表项标记制作引导导航栏下拉列表?

时间:2014-09-21 21:32:41

标签: css twitter-bootstrap

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

但我在导航栏中有一个使用徽章的下拉菜单。我认为这是因为它位于.navbar.dropdown-menu或' .nav-tabs'当我将.pull-right应用于徽章时,它会换行到我不想要的新行。

有没有人运气下载下拉菜单并获得右侧右侧的徽章? (拿那首碧昂丝的歌)

1 个答案:

答案 0 :(得分: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