Как сделать выпадающее меню бутстрапа с значками списка, выровненными вправо?

Question

В документации для badges значок вложен в класс nav nav-pills nav-stacked.

Но у меня есть выпадающее меню в навигационной панели, которая использует значки. Я думаю, это потому, что он находится в или .dropdown-menu или «.nav-tabs», который, когда я применяю .pull-right к значку, переносится на новую строку, которую я не хочу.

Неужели кому-то повезло в том, что вы выбрали выпадающее меню и получили значки справа направо? (возьмите, что песня Beyonce)

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