如何在Bootstrap中实现网页的固定页脚设计

固定在窗口底部

不会随内容滚动而消失。

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

body {
  /* Default height of navbar is 50px *
  padding-bottom: 70px;
}

固定在页面底部

粘在内容底部，内容未撑满窗口时则粘在窗口底部。

<footer class="footer">
  <div class="container">
    ...
  </div>
</footer>

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: 50px;
  background-color: #f5f5f5;
}

参考

• http://v3.bootcss.com/components/#navbar-fixed-bottom

• https://getbootstrap.com/examples/sticky-footer/