类似Google的全宽粘页脚

Question

我正试图在他们的主页底部创建一个像google一样的页脚。它将是页面的全宽，两侧都有链接。但是，我想拥有该中心的版权。

这是我用来完成此操作的默认布局：http://jsfiddle.net/304gvLyn/

但是，页脚包含在container内，因此它不会跨越页面的整个宽度。

<footer class="footer">
  <div class="container">
      <p class="text-muted pull-right">Button Here</p>
  </div>
</footer>

如果我将其转换为container-fluid，那么就没有填充，并且有时会创建一个水平滚动条。

目前的情况如下：

这就是我想要做的：

Answer 1

Bootstrap容器设计用于行和列。

<footer class="footer container-fluid">
    <div class="row">
        <div class="col-xs-2">
            <p class="text-muted pull-right">Button Here</p>
        </div>

        <div class="col-xs-8 text-center">
            <p>Copyright Here</p>
        </div>

        <div class="col-xs-2">
            <p class="text-muted pull-right">Button Here</p>
        </div>
    </div>
</footer>

<强> Demo

Answer 2

您只需告诉容器宽度必须占据页脚元素的整个宽度：

.footer > .container{
    width:100%;
}

http://jsfiddle.net/304gvLyn/2/