如何在Bootstrap两列布局的单列中实现粘性页脚？

你提到的position: fixed的问题确实很典型——fixed定位是相对于视口的，所以会脱离容器流，宽度自然没法贴合所在列。用Flexbox来实现是最优解，而且Bootstrap 4本身就基于Flexbox，我们可以直接用它的内置类来搞定，几乎不用额外写CSS。

核心思路 #

我们需要把目标列（右侧的col-9）变成一个垂直方向的Flex容器，让里面的内容区域自动填充剩余空间，页脚就会被“推”到列的底部，同时完全贴合列的宽度。

完整实现代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<style>
.row { background: #f8f9fa; }
.col { border: solid 1px #6c757d; padding: 10px; }
.footer { height: 40px; line-height: 40px; }
</style>

<div class="container h-100"> <!-- 给container也加上h-100，确保高度撑满视口 -->
  <div class="row h-100">
    <div class="col col-3"> 1 of 2 </div>
    <div class="col-9 d-flex flex-column h-100"> <!-- 关键：把列变成垂直Flex容器，高度100% -->
      <!-- 内容区域：用flex-grow-1让它填充剩余空间 -->
      <div class="flex-grow-1">
        <div class="row">
          <div class="col col-8">2 of 2</div>
          <div class="col col-4">2 of 2</div>
        </div>
        <!-- 可以在这里加更多内容测试，页脚始终会在底部 -->
      </div>
      <!-- 页脚：不需要fixed，自然贴合列宽度 -->
      <footer class="border w-100 footer">STICKY FOOTER</footer>
    </div>
  </div>
</div>

关键细节解释 #

• d-flex flex-column：把右侧列设置为垂直方向的Flex容器，里面的元素从上到下排列。
• h-100：确保列的高度撑满父级.row的高度（父级.row和.container也需要h-100来保证高度链完整，从视口一直传递到列）。
• flex-grow-1：给内容区域添加这个类，让它自动填充列内除了页脚之外的所有剩余空间，这样页脚就会被挤到列的底部。
• 去掉了position-fixed：页脚现在是文档流的一部分，宽度会自动继承所在列的宽度，不会超出容器。

这样实现的粘性页脚完全贴合所在列的宽度，响应式表现正常，而且不会脱离文档流影响其他元素的布局。

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