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

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>