0

http://bootsnipp.com/snippets/gjONo I have a footer that uses nav-pills. I've set them, in this case, to col-sm-2 class and put 6 of them in a row. The last one wraps to a second line. What do I need to do to adjust so it fits onto a single line appropriately? I'm assuming that the nav-pill adds some sort of padding that breaks the grid. Thanks.

Chris Denby
  • 33
  • 3
  • Try [this](http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3) - It's because `col-md-*` adds 15px padding left and right. –  Jun 14 '16 at 14:58

1 Answers1

0

This is primarily due to placing columns inside of nav-pills. The nav has a margin of 2px which is adjusting the columns, this is why the wrapping is happening.

.nav-pills > li+li {
  margin-left: 2px
}

Also, nesting containers is generally not recommended as well as using rows without columns and possibly mixing rows with other classes depending on the use case (using a row with nav-pills will also cause them to wrap.)

See Nav Justified in case this is what you are trying to achieve.

Working Example:

.nav-columns .nav-pills > li+li {
  margin-left: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <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">
    <div class="row nav-columns">
      <ul class="nav nav-pills">
        <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>
  </div>
</footer>
vanburen
  • 21,502
  • 7
  • 28
  • 41
  • Yep - that fixes it - thanks. I can't really upvote because I just registered on SO. Some of what I was doing in there was attempts to make the wrapping stop. But why would we need both the div class="container" and the div immediately below it? Couldn't I just add the row and nav-columns classes to the first div and dump the nested one? – Chris Denby Jun 14 '16 at 15:27