Twitter Bootstrap 3 Sticky Footer

我已经使用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中)。

2014-11-10 16:05:05

其他回答

推div应该在包装后，而不是在..就像这样

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>

2013-10-28 22:48:48

我在这个问题上有点晚了，但我看到了这篇文章，因为我刚刚被这个问题咬伤了，最终找到了一个非常简单的方法来克服它，简单地使用导航栏与导航栏固定底部类启用。例如:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

2014-05-01 15:02:57

总结所有这些，只要记住一件事，除了footer以外的所有东西都应该有最小高度:100%或更少。

2014-11-05 11:12:29

只需将类navbar-fixed-bottom添加到页脚。

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

2014-02-06 13:20:56