"Grid vs. nav-pills"
Bootstrap 3.3.0 Snippet by cdenby

<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>
.nav-columns .nav-pills > li+li { margin-left: 0 }

Questions / Comments:

Related: See More