我通常熟悉使用css刷新页脚的技术。

但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。


当前回答

我找到了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>

这看起来不错,而且对我很有效

参见小提琴中的例子

其他回答

更简单的官方示例:http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

我找到了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>

这看起来不错,而且对我很有效

参见小提琴中的例子

最简单的技术可能是使用Bootstrap navbar-static-bottom,并将主容器div设置为高度:100vh(新的CSS3视图端口百分比)。这将把页脚冲洗到底部。

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

这现在包含在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

在这里,你会发现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