Bootstrap3移动端布局问题：<div class="clearfix"></div>致列间距异常

嘿，我来帮你搞定这个Bootstrap 3的布局难题！你遇到的第二组col-md-6列间隙、列重叠，还有clearfix导致间距异常的问题，本质是Bootstrap浮动布局在列高度不一致时的错位，以及clearfix的使用时机不对导致的。下面给你几个实用的解决方案：

1. 用响应式Clearfix替代普通Clearfix #

普通的<div class="clearfix"></div>会在所有屏幕尺寸下清除浮动，这就导致移动端（小屏幕）本该堆叠的列被强制换行，出现不必要的大间隙。Bootstrap 3内置了响应式的clearfix类，你可以针对中等及以上屏幕（也就是col-md-生效的断点）来清除浮动：

<!-- 在每两行（4个col-md-6）之后添加这个响应式clearfix -->
<div class="clearfix visible-md-block visible-lg-block"></div>

这样只有在屏幕宽度≥992px时才会清除浮动，移动端下列会正常堆叠，不会出现异常间距。

2. 让列高度保持一致（从根源避免错位） #

如果你的图片高度不一致，浮动的列很容易因为高度差出现错位重叠。你可以用自定义CSS结合Flexbox来让同一行的列等高（Bootstrap 3默认不支持Flex，但可以自己加）：

/* 仅在中等及以上屏幕生效 */
@media (min-width: 992px) {
  .row.equal-height {
    display: flex;
    flex-wrap: wrap;
  }
  .row.equal-height [class*="col-"] {
    display: flex;
    flex-direction: column;
  }
}

然后给包含列的row加上equal-height类：

<div class="row equal-height">
  <div class="col-md-6">
    <!-- 你的图片内容 -->
  </div>
  <div class="col-md-6">
    <!-- 你的图片内容 -->
  </div>
  <div class="clearfix visible-md-block visible-lg-block"></div>
  <div class="col-md-6">
    <!-- 你的图片内容 -->
  </div>
  <div class="col-md-6">
    <!-- 你的图片内容 -->
  </div>
</div>

等高的列会让浮动布局更稳定，从根源上避免列重叠的问题。

3. 检查HTML结构是否正确 #

有时候列间隙或重叠是因为HTML结构错误导致的，比如：

• 列没有正确嵌套在row里面
• 同一行的col-md-6数量超过2个（Bootstrap一行总宽度是12，两个col-md-6刚好填满）
• 标签闭合错误

仔细检查你的结构，确保每个col-md-6都在row内，且每行（md及以上屏幕）只有2个列。

按照上面的方法调整后，你应该就能实现想要的交错图片布局，同时解决列间隙和重叠的问题啦！

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