这里有一个方法，将添加一个粘脚，不需要任何额外的CSS或Javascript，除了什么已经在Bootstrap，不会干扰你当前的页脚。

示例:Easy Sticky Footer

只需复制并粘贴到您的代码。不吵闹不混乱。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>

当前版本的bootstrap似乎不再适用于这个函数了。如果你下载了他们的sticky-footer-navbar的例子，并在主体区域放置了大量的内容，footer将被向下推过视口的底部。它一点也不粘。

这里有一个方法，将添加一个粘脚，不需要任何额外的CSS或Javascript，除了什么已经在Bootstrap，不会干扰你当前的页脚。

示例:Easy Sticky Footer

只需复制并粘贴到您的代码。不吵闹不混乱。

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>

使用flex!确保在HTML中使用body和main，这是最好的解决方案之一(除非你需要IE9支持)。它不需要固定的高度或类似的东西。

这也推荐用于Materialize !

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

这个棘手的例子对我不适用。 我的解决方案:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}

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

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