twitter-bootstrap-3 - 如何在引导程序中正确地将内联 navpills 与徽章对齐

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>