我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
使用navbar组件并添加.navbar-fixed-bottom类:
<div class="navbar navbar-fixed-bottom"></div>
增加身体
{ padding-bottom: 70px; }
其他回答
保持简单。
footer {
bottom: 0;
position: absolute;
}
您可能还需要通过向正文添加等同于页脚高度的margin-bottom来抵消页脚的高度。
下面是一个使用css3的例子:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
小提琴
我找到了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>
这看起来不错，而且对我很有效
参见小提琴中的例子
在这里，你会发现HAML (http://haml.info)的方法，导航栏在顶部，页脚在页面底部:
%body
#main{:role => "main"}
%header.navbar.navbar-fixed-top
%nav.navbar-inner
.container
/HEADER
.container
/BODY
%footer.navbar.navbar-fixed-bottom
.container
.row
/FOOTER
对于Sticky Footer，我们在HTML中使用了两个DIV来实现基本的Sticky Footer效果。这样写:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
