twitter-bootstrap-3 - 如何在 Bootstrap 中将内联导航丸与徽章正确对齐

Question

我在左侧 Pane 上有一个由堆叠的 navpills 制成的菜单，单击每个页面时都会激活右侧的其他菜单；每个药丸都包含一个徽章，显示其自身的一些附加上下文信息以及打开的内容。

<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>