我通常熟悉使用css刷新页脚的技术。

但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。


当前回答

保持简单。

footer {
  bottom: 0;
  position: absolute;
}

您可能还需要通过向正文添加等同于页脚高度的margin-bottom来抵消页脚的高度。

其他回答

使用navbar组件并添加.navbar-fixed-bottom类:

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

增加身体

  { padding-bottom: 70px; }

为了让你的粘性页脚工作,你需要包装你的.container-fluid div,你还缺少了.wrapper类的一些属性。试试这个:

从body标签中删除padding-top:70px,并将其包含在.container-fluid中,如下所示:

.wrapper > .container-fluid {
    padding-top: 70px;
}

我们必须这样做,因为向下推主体以适应导航条,最终会将页脚推得更远一点(更远70px),超过视口,所以我们得到了一个滚动条。相反,使用.container-fluid div会得到更好的结果。

接下来,我们必须将.wrapper类从.container-fluid div外面移除,然后用它来包装#main div,如下所示:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>  

你的页脚当然必须在。wrapper div之外,所以从'。包装div并把它放在外面,像这样:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

在这一切完成后,通过使用负边距正确地将你的页脚推向你的.wrapper类,如下所示:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

这应该可以工作,尽管你可能需要修改一些其他的东西来让它在屏幕调整大小时工作,比如在.wrapper类上重置高度,如下所示:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

使用Bootstrap 3.6.6测试。

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

使用下面的类将它推到页面的最后一行,也使它到页面的中心。 如果你正在使用ruby on rails HAML页面,你可以使用下面的代码。 % footer.card.text-center

请不要忘记使用twitter bootstrapp

使用这段代码在引导它的工作

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>