使用 bootstrap 3 让页脚贴在底部

Question

我是不是漏掉了什么？我觉得我已经多次浏览了他们的网站文档，但在页脚上没有找到任何内容。

我只是希望有一个常规的反色页脚，它会粘在屏幕的最底部，即使那里没有任何东西可以保留它。当内容长于屏幕高度时，它会将其向下推到底部。

现在我有这个：

<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-inner">
    <div class="container">
      <span>testing</span>
    </div>
  </div>
</div>

但每次屏幕分辨率低于 980px 时，页脚都会跳到屏幕的最顶部。我与 bootstrap 的合作不多，这似乎是他们应该考虑的事情，我可能在这里遗漏了一些关键的东西。谁能解释一下这样做的原因？

Answer 1

你可以在 Bootstrap 3 中实现粘性页脚：

CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

HTML

<div class="container">
  <div class="page-header">
    <h1>Sticky footer</h1>
  </div>
  <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

DEMO HERE

Answer 2

这适用于 Bootstrap 3.3.1

<div class="container">
    [...]
</div>
<footer class="footer">
  <div class="container">
    <p class="text-muted">my footer</p>
  </div>
</footer>

确保页脚标记在 container div

之外

你也需要 sticky-footer.css 即 here

编辑：

要做到你在评论中要求的，你试过这个吗？：

<footer class="footer">
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="navbar-inner">
            <div class="container">
                <span>testing</span>
            </div>
        </div>
    </div>
</footer>

您还需要为 .footer 调整 css class:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* height: 60px; */
    background-color: #f5f5f5;
}

使用 bootstrap 3 让页脚贴在底部

Getting a footer to stick to the bottom with bootstrap 3

css

twitter-bootstrap

twitter-bootstrap-3