扩展页脚以填充页面底部超过容器的边缘?(从左到右或宽度)

Question

这是我的模板，我想像在这个网站上一样填充页脚 kars4kids.com （向下滚动到页脚）

.footer {
  padding: 180px 0;
  background-color: #222222;
  width:100%;

Answer 1

<footer> 标签位于.container内。请将其从包装中取出，或将其更改为流体容器。

<footer>
  <div class="container">               <!-- This is the reason -->
    <div class="row">
      <div class="col-md-3 col-sm-6">

或将其更改为 container-fluid .

Answer 2

您需要使外部元素（页脚）占据整个宽度，并在内部放置另一个元素来容纳您的内容并在中间正确格式化。

<footer>
  <div class="container">
     <!-- content -->
  </div>
</footer>
footer {
  background: #E5F4FE;
  padding: 0;
  margin: 0;
  display: block;
}
footer .container{
  width: 70%;
  max-width: 1050px;
  margin-right: auto;
  margin-left: auto;
}

我在这里创建了一个示例 http://codepen.io/AVDW/pen/xVgLyO