Bootstrap药丸多排怪异定位

Question

编辑：我意识到很难理解这个问题，所以在这里： 当我的自举导航中的药丸不再适合一行时（当减小宽度或添加更多药丸时），位置不符合要求。我希望'溢出'进入一个新的行，而不是卡在图像中的特斯拉之间。要在fiddle中查看它：减小输出窗格的宽度，并留意最右边的药丸。

<ul class="nav nav-pills">
  <li><a href=" #">Audi</a></li>
  ...
</ul>

Answer 1

只需删除 即可获得预期结果。如果你需要在药片的右侧有一些空间，你可以添加额外的CSS：

代码（有替代空格，而不是  - https://jsfiddle.net/ey2bosj2/2/）：

ul.nav-pills li:not(:last-child) {
  margin-right:10px;
}

<div class="control segmentinputgroup form-inline">
  <div class="span12">
    <span></span>
    <ul class="nav nav-pills">
      <li role="presentation"><a href="#">Audi</a></li>
      <li role="presentation"><a href="#">BMW</a></li>
      <li role="presentation"><a href="#">Cooper</a></li>
      <li role="presentation"><a href="#">Fiat</a></li>
      <li role="presentation"><a href="#">Jaguar</a></li>
      <li role="presentation"><a href="#">Kia</a></li>
      <li role="presentation"><a href="#">Mazda</a></li>
      <li role="presentation"><a href="#">Seat</a></li>
      <li role="presentation"><a href="#">Tesla</a></li>
      <li role="presentation"><a href="#">Volvo</a></li>
    </ul>
  </div>
</div>