如何在 Bootstrap 3 中使页脚成为整个窗口的宽度？答案

【问题标题】：How to make footer the width of the full window in Bootstrap 3?如何在 Bootstrap 3 中使页脚成为整个窗口的宽度？
【发布时间】：2013-11-08 19:42:36
【问题描述】：

我一直在尝试让页面上的页脚在页面上保持静态时占据窗口的整个宽度（如导航栏），但我无法弄清楚如何做到这一点。

你怎么能做到这一点？我都试过了：

<div class="footer">
    <p>This is a footer</p>
</div>

和

<div class="navbar navbar-static bottom">
   <p>This is a static navbar</p>
</div>

但它们都没有运行页面的填充宽度，而是在每一侧都有边距。如何在不弄乱引导程序中的响应式调整大小的情况下进行更改？

【问题讨论】：

您是否正在寻找这样的“粘性页脚”：bootply.com/75426 ？
是的！但是当我更改页脚的颜色时，它仍然没有达到页面的整个宽度。它的侧面有边距。你怎么能改变它？

标签： twitter-bootstrap footer twitter-bootstrap-3 sticky-footer

【解决方案1】：

如果您查看引导文档站点：http://getbootstrap.com，您可以看到他们使用哪些导航栏类来实现您描述的效果。他们有类似的东西：

<div class="navbar navbar-fixed-bottom">

</div>

导航栏 div 本身不应包裹在任何容器中以避免添加边距。

【讨论】：

这就是我想要的——但我不希望导航栏固定在屏幕上，我只想在滚动到底部时显示它。当您将类更改为 navbar-static-bottom 时，它不会占据屏幕的整个宽度。知道如何改变吗？
您是否将页脚包含在任何其他 div 中？除非带有“容器”类的 div 正在包装您的内容，否则不应发生 AFAIK。
如果使用 bootstrap 3 并且您不想让页脚变得粘滞，请参阅 Nitish 的回答。

【解决方案2】：

试试这个：

<footer>
    <div class="footer">
       <div class="container narrow row-fluid">
          <div class="span4">
          </div>
          <div class="span3">
          </div>
          <div class="span5">
          </div>
       </div>
    </div>
</footer>

在.footer 类中添加背景颜色以查看效果

【讨论】：

【解决方案3】：

<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        This is your footer!
      </div>
    </div>
  </div>
</footer>

【讨论】：

【解决方案4】：

现在回答这个问题已经很晚了，但如果您使用的是 bootstrap 3.0 及更高版本

<footer class="section section-primary">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
  </footer>

【讨论】：

这对我来说不是全宽的。是给任何人的吗？