如何在引导程序中正确对齐内联导航和徽章

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>