Bootstrap pills multi row 奇怪的定位

Question

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

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

Answer 1

只需删除   即可获得预期结果。如果您需要在药片右侧添加一些 space，您可以添加额外的 CSS:

代码（备选 space，而不是   - 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>

Bootstrap pills multi row 奇怪的定位

Bootstrap pills multi row weird positioning

css

twitter-bootstrap-2