如何在 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）：

我应该使用什么 markup/css 来使徽章保持右对齐，同时让文本正确换行而留下 space？

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>

如何在 bootstrap 中正确对齐内联导航栏和徽章

How to correctly align inline navpills with badge in bootstrap

word-wrap

badge

twitter-bootstrap-3

nav-pills