我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?
当前回答
如果你想在类中使用自举构建页脚。你还应该写一些javascript:
$(document).ready(function(){
$.fn.resize_footer();
$(window).resize(function() {
$.fn.resize_footer();
});
});
(function($) {
$.fn.resize_footer = function(){
$('body > .container-fluid').css('padding-bottom', $('body > footer').height());
};
});
它将通过固定的页脚防止内容重叠，并且当用户更改窗口/屏幕大小时，它将调整填充底部。
在上面的脚本中，我假设footer直接放置在body标签中，就像这样:
<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>
这绝对不是最好的解决方案(因为JS可以避免)，但它没有任何重叠的问题，它很容易实现和响应性(高度不是硬编码在CSS中)。
其他回答
Html
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
CSS
.footer {
position: fixed;
bottom: 0;
}
简单的 js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
Update # 1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
总结所有这些，只要记住一件事，除了footer以外的所有东西都应该有最小高度:100%或更少。
使用flex!确保在HTML中使用body和main，这是最好的解决方案之一(除非你需要IE9支持)。它不需要固定的高度或类似的东西。
这也推荐用于Materialize !
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
当前版本的bootstrap似乎不再适用于这个函数了。如果你下载了他们的sticky-footer-navbar的例子，并在主体区域放置了大量的内容，footer将被向下推过视口的底部。它一点也不粘。
