如何让Bootstrap 4中的fixed-bottom页脚置于页面内容下方？

我来帮你搞定这个小痛点！你现在用的fixed-bottom类虽然能让页脚固定在视口底部，但它是绝对固定定位——不管页面内容多少都会钉在那里，甚至可能覆盖内容。要实现「内容不够一屏时固定在底部，内容超过一屏时跟在内容后面」的效果，咱们用Bootstrap自带的flex布局工具就能完美解决，不用额外写复杂CSS。

具体实现步骤 #

1. 调整页面整体结构，把body设置成垂直方向的flex容器，并让它至少占满整个视口高度
2. 给页面主内容区域添加flex-grow-1类，让它自动填充剩余空间，把页脚「推」到底部
3. 移除页脚上的fixed-bottom类，让它回到正常文档流中

完整代码示例 #

<body class="d-flex flex-column min-vh-100">
  <!-- 你的页面主内容区域 -->
  <main class="flex-grow-1">
    <!-- 这里放你的导航栏、文章内容等页面主体 -->
  </main>

  <!-- 你的页脚（去掉fixed-bottom类） -->
  <footer class="container">
    <div class="row">
      <div class="col-md-5">some content</div>
      <div class="col-md-7">some content</div>
    </div>
  </footer>
</body>

原理说明 #

• d-flex flex-column：把body变成垂直方向的flex容器，子元素（main和footer）会垂直排列
• min-vh-100：确保body的高度至少等于视口高度，这样内容不足时也能撑满一屏
• flex-grow-1：让main区域自动占据body里除页脚外的所有剩余空间——内容不够时，main会被拉伸，页脚被推到视口底部；内容超过一屏时，main会被撑开，页脚自然跟在内容后面

如果你的页脚需要保留fixed-bottom里的z-index样式，只需给页脚加个自定义类即可：

.footer-custom {
  z-index: 1030;
}

然后把这个类加到页脚上就可以了。

内容的提问来源于stack exchange，提问作者ace