Twitter bootstrap 引导选项卡与小屏幕上的徽章对齐跳转到第二行

我有示例代码

<ul class="nav nav-tabs nav-justified">
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>
<li role="presentation" class="active"><a href="#">Home <span class="badge">15</span></a></li>

我有问题的徽章是屏幕较小的徽章跳到第二排，这是我不想要的

工作演示 我试过用float等，但没用：/还是跳到第二排 也出现在大屏幕标题上，标签中央有徽章

---

谢谢

你可以使用左边的css来改变标题的位置。屏幕大小可以是动态的。。。标题也从标题更改为*标题