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的

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

使用引导程序3将页脚粘到底部

2 个答案: