Question

http://bootsnipp.com/snippets/gjONo 我有一个使用导航丸的页脚。在这种情况下，我将它们设置为col-sm-2类，并将它们中的6个连续放置。最后一个包裹到第二行。我需要做些什么才能进行调整以使其适当地适合单行？我假设nav-pill添加了一些打破网格的填充。感谢。

Answer 1

这主要是因为将列放在nav-pills中。导航具有2px的边距，这是调整列，这就是包装发生的原因。

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

此外，通常不推荐使用nesting containers，也不建议使用没有列的行，可能根据用例将行与其他类混合（使用带有nav-pills的行也会使它们包裹起来。）

如果这是您要实现的目标，请参阅Nav Justified。

工作示例：

＆＃13;

.nav-columns .nav-pills > li+li {
  margin-left: 0
}

＆＃13;

<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>

＆＃13;

引导3 - 6列cols-sm-2包裹在第12列之前

1 个答案: