<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Problem with col-sm-2 wrapping prematurely</h2>
Current Screen Resolution:
<span class="visible-xs-inline alert-danger">XS</span>
<span class="visible-sm-inline alert-warning">SM</span>
<span class="visible-md-inline alert-info">MD</span>
<span class="visible-lg-inline alert-success">LG</span>
<hr/>
Problem - the 6th pill wraps to a second line, even though all of the visible pills are col-sm-2.<br/>
Something in using nav-pills breaking the grid calcs?
</div>
<footer class="footer">
<div class="container">
<ul class="nav nav-pills row nav-columns catcount_8">
<li class="col-sm-2"><a href="#">Favs</a></li>
<li class="col-sm-2"><a href="#">Opt1</a></li>
<li class="col-sm-2"><a href="#">Opt2</a></li>
<li class="col-sm-2"><a href="#">Opt3</a></li>
<li class="col-sm-2"><a href="#">Opt4</a></li>
<li class="col-sm-2"><a href="#">Opt5</a></li>
</ul>
</div>
</footer>
</div>
