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

使用Bootstrap 4中内置的flex实用程序! 以下是我使用Bootstrap 4工具得到的结果。

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex使主div成为一个伸缩容器 .flex-column在主div来安排你的flex项目在一个列 min-height: 100vh到主div，可以使用style属性，也可以在CSS中，垂直填充视口 元素上的.flex-grow-1，让主内容容器占用视口高度中剩余的所有空间。

HenryW的答案很好，尽管我需要做一些调整才能让它按我想要的方式工作。特别地，下面也处理:

避免“跳跃性”页面加载首先标记不可见和设置在javascript可见 优雅地处理浏览器大小调整 此外，如果浏览器变得更小，页脚变得比页面大，设置页脚备份 高度函数调整

以下是这些调整对我有效的方法:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

这现在包含在Bootstrap 2.2.1中。

引导3.倍

使用navbar组件并添加.navbar-fixed-bottom类:

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

引导4.倍

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

别忘了添加body {padding-bottom: 70px;}或以其他方式覆盖页面内容。

文档:http://getbootstrap.com/components/ # navbar-fixed-bottom

这很有效

html

<footer></footer>

css

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

在bootstrap 4.3的最新版本中，这可以使用.fixed-bottom类来完成。

<div class="fixed-bottom"></div>

下面是我如何在页脚中使用它:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

你可以在这里的职位文档中找到更多信息。