防止引导导航栏固定底部重叠

Question

在某些情况下，引导程序 navbar-fixed-bottom 会与其他内容重叠而不显示滚动条。

例如https://jsfiddle.net/m5vgd9g7/1/:

<div>
  <a class="btn btn-primary" href="#">
    Button
  </a>
</div>

<div class="navbar navbar-default navbar-fixed-bottom"
         style="padding-bottom:0px; min-height:0px">
  bottom
</div>

如果你让显示窗格在垂直方向上很短，文本“底部”会与按钮重叠：

如何防止重叠，所以在它们重叠之前会出现一个垂直滚动条？

Answer 1

你应该在你的顶部 div 添加一个类 row，所以你的顶部 html 看起来像

<div class="row">
  <a class="btn btn-primary" href="#">
    Button
  </a>
</div>

这将为您的内容垂直添加一个滚动条。但是当我们声明一个固定的导航栏时，您应该记住将填充/边距添加到导航栏的其余内容的大小，这应该显示其余内容而不会被导航栏侵入。所以你的顶部 div 的最终 html 看起来像，

<div class="row" style="padding-bottom:15px;">
  <a class="btn btn-primary" href="#">
    Button
  </a>
</div>

注意：我永远不会使用内联样式，因为从长远来看它会使 html 复杂化并且难以调试。为了演示，我在这里做了。

小提琴的例子在这里：https://jsfiddle.net/m5vgd9g7/

编辑

感谢@JDiMatteo，他对row 类添加发表了评论。我正要维护网格系统中的引导标准。 （参考：http://getbootstrap.com/css/#grid）。显然，row 似乎应该包含在 container 或 container-fluid 类中才能正常工作。这将定义一个行，元素/列（如在引导程序中）可以驻留在其中。通过使用它，您可以摆脱我们之前使用的自定义样式padding/margin。

<div class="container">
  <div class="row">
    <a class="btn btn-primary" href="#">
      Button
    </a>
  </div>
</div>