如何修复Bootstrap Footer在特定分辨率下出现的空白问题？

首先，咱们先拆解你遇到的核心问题：
你的代码用了Bootstrap 3的栅格系统（col-sm-6是Bootstrap 3的典型类名），而Bootstrap 3的row是通过浮动实现布局的。如果父元素（这里是container-fluid或footer）没有清除浮动，就会触发高度塌陷——footer的背景高度只会等于自身的padding值，里面的内容会“溢出”到footer背景之外，视觉上就像页脚区域出现了空白。

之前你尝试的方案大概率是引入了错误的布局属性（比如给footer加浮动、修改宽度）才导致新异常，咱们来一步步做正确修复：

方案1：用Bootstrap自带的清除浮动类（最简洁） #

直接给包含浮动元素的容器添加clearfix类，或者在row后追加清除浮动的元素：

修改后的HTML代码：

<footer>
  <div class="container-fluid clearfix">
    <div class="row">
      <div class="col-sm-6">
        <h6>Copyright &copy; 2018</h6>
      </div>
      <div class="col-sm-6">
        <h6>About us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
      </div>
    </div>
  </div>
</footer>

或者也可以在row标签后单独加清除浮动元素：

<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h6>Copyright &copy; 2018</h6>
      </div>
      <div class="col-sm-6">
        <h6>About us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</footer>

方案2：自定义CSS清除浮动（无额外HTML元素） #

如果不想增加HTML标签，可以给footer添加CSS伪元素来清除浮动：

footer{
  background: #333;
  color: #eee;
  font-size: 11px;
  padding: 20px;
}
/* 用伪元素清除浮动，解决高度塌陷 */
footer::after {
  content: "";
  display: table;
  clear: both;
}

方案3：改用Bootstrap Flex布局（推荐，适合Bootstrap 4+） #

如果你能升级到Bootstrap 4或5，栅格系统默认用Flex布局，从根源上避免浮动导致的塌陷问题。类名和Bootstrap 3基本兼容，直接保留原有结构即可：

<!-- Bootstrap 4+环境下使用 -->
<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h6>Copyright &copy; 2018</h6>
      </div>
      <div class="col-sm-6">
        <h6>About us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
      </div>
    </div>
  </div>
</footer>

为什么之前的方案会出问题？ #

如果之前的解决方案是给footer加了float:left或者修改了width:auto，会导致footer不再占满屏幕宽度，出现新的空白；如果错误移除了container-fluid的padding，会让内容贴到屏幕边缘，同样引发异常。咱们上面的方案都是从根源解决浮动塌陷问题，不会引入新的布局bug。

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