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

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


当前回答

我找到了mix of navbar-inner和navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

这看起来不错,而且对我很有效

参见小提琴中的例子

其他回答

使用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;
}

这对我来说非常有效。

将这个类navbar-fixed-bottom添加到你的页脚。

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

我是这样用的:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

它在整个宽度的底部。

编辑:这将设置页脚始终可见,这是你需要考虑的事情。

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

请不要忘记使用twitter bootstrapp

另一种可能的解决方案是使用媒体查询

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

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

<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>