Search code examples
csstwitter-bootstrap-2

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>
  ...
</ul>
Solution

  • 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) {
  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>