Как правильно выровнять встроенные navpills с значком в bootstrap

Question

У меня есть меню, выполненное со стеклянными навигаторами на левой панели, где каждая страница при нажатии активирует другое меню справа; каждая таблетка содержит значок, показывающий некоторую дополнительную информацию контекста для себя и что открывается.

<ul class="nav nav-pills nav-stacked"> 
    <li><a href="#tab_1" data-toggle="pill">Introduction <span class= 
    "badge pull-right">0/2</span></a></li> 
    <li class="active"><a href="#tab_4" data-toggle="pill">The effect of fear of humans on ease of handling of pigs <span class="badge pull-right">0/4</span></a></li> 
    <li><a href="#tab_2" data-toggle="pill">Questionnaire <span class= 
    "badge pull-right">0/4</span></a></li> 
</ul> 

У меня есть проблема в упаковке содержимого таблетки, которые я не в состоянии установить: когда ширина контейнера изменяется, текст и значок обернуты, соответственно, но существует определенная ширина для которого только нагрудный знак обернут, а не текст, и таблетка не увеличивается по высоте.

Я имею в виду, в третьем разделе, второй таблетки, следующего изображения (jsfiddle здесь):

Что разметки/CSS, я должен использовать, чтобы сохранить значок выровненный справа, в то время как с правильной передачей текста, оставляя пространство для него?

Answer 1

Поместите <span class="badge pull-right">0/4</span> перед текстом, который находится внутри <a></a>.

Как это: https://jsfiddle.net/m24ho905/2/

<ul class="nav nav-pills nav-stacked"> 
    <li class=""><a href="#tab_1" data-toggle="pill"><span class= 
    "badge pull-right">0/2</span> Introduction </a></li> 
    <li class="active"><a href="#tab_4" data-toggle="pill"><span class="badge pull-right">0/4</span> The effect of fear of humans on 
    ease of handling of pigs </a></li> 
    <li class=""><a href="#tab_2" data-toggle="pill"><span class= 
    "badge pull-right">0/4</span> Questionnaire </a></li> 
</ul>