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

只需在页脚上方的div上添加mb-5类（下边距为5）：

对于Bootstrap中已内置的东西，无需使用额外的CSS代码。

查看有关间距here的信息

Answer 2

将CSS更新为此。

.fixed-bottom {
    position: fixed;
    margin: auto;
    height: 100px;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

删除

footer {
    margin-top: 25px;
}

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

2 个答案: