html - 如何在页面内容下方的 bootstrap 4 中推送固定底部页脚？

Question

我在 boostrap 4 中使用固定底部类，以便在没有内容或内容少于整页时将页脚保持在底部。下面是来自 bootstrap 4 的固定底部类的 CSS:

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

我的页脚看起来像:

<footer class=" fixed-bottom  container">
  <div class="row">
    <div class="col-md-5">
      some content
    </div>
    <div class="col-md-7">    
      some content
    </div>
  </div>
</footer>

页脚的 CSS:

footer {
    margin-top: 25px;
}

页脚很好地位于底部，但如果用户单击加载的内容不适合页面空白空间的链接，则会出现滚动条，并且页脚仍然粘在内容顶部以遮盖内容。如何使用 CSS 将页脚移动到内容下方，同时将类固定在页脚底部？当用户滚动到页面底部时，页脚应该可见。

请注意，页脚内容比页面内容宽，因此尝试使用 z 索引将不起作用。

Answer 1

只需将 mb-5 类(margin bottom 5)添加到页脚上方的 div :)

不需要为已经在 Bootstrap 中构建的东西使用额外的 css 代码。

查看有关间距的信息 here