title: Bootstrap pills multi row weird positioning
body: <p>Edit: I realized it was hard to understand the question as it was, so here it goes:
  When the pills in my bootstrap nav no longer fits into one row (when decrease width, or adding more pills) the position is not as desired. I would like the 'overflow' to go into a new row, not get stuck in between as for Tesla in the image. To see it in the <a href="https://jsfiddle.net/burktelefon/ey2bosj2/" rel="nofollow noreferrer">fiddle</a>: decrease the width of the output pane and keep watch on the rightmost pill.</p>
  
  <p><a href="https://i.stack.imgur.com/5so8C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5so8C.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;ul class="nav nav-pills"&gt;
    &lt;li&gt;&lt;a href=" #"&gt;Audi&lt;/a&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;
  </code></pre>