burktelefon burktelefon - 1 year ago 79
CSS Question

Bootstrap pills multi row weird positioning

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 fiddle: decrease the width of the output pane and keep watch on the rightmost pill.

enter image description here

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

Answer Source

Simply remove the &nbsp; to get the expected result. If you need some space on the right side of the pills you can add the additional CSS:

The Code (with alternative space, not &nbsp; - https://jsfiddle.net/ey2bosj2/2/):

ul.nav-pills li:not(:last-child) {
<div class="control segmentinputgroup form-inline">
  <div class="span12">
    <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>