如何阻止Bootstrap 4列执行jQuery .fadeOut后触发行重排？

这个问题我之前也碰到过——Bootstrap的网格系统依赖元素的实际布局占位来计算列的排列，默认的fadeOut()方法最终会把元素设置为display: none，这就相当于把该列从布局中彻底移除，剩下的列自然会重新填充空间，视觉上就会出现跳变。

下面分享几个实用的解决思路，都能让行“认为”该列仍然存在：

1. 自定义“保留占位的淡出”动画 #

核心思路是不使用display: none，而是通过修改opacity和visibility属性实现隐藏——visibility: hidden会让元素不可见，但仍然占据原有的布局空间。

你可以自己写一个替代fadeOut的函数：

function fadeOutKeepSpace(element) {
  $(element).animate({ opacity: 0 }, 500, function() {
    $(this).css('visibility', 'hidden');
    // 若需后续恢复，可提前保存原状态
  });
}

// 调用示例：绑定按钮点击事件
$('.hide-btn').on('click', function() {
  fadeOutKeepSpace($(this).closest('.col-sm-3'));
});

如果要恢复显示，对应的恢复函数可以这样写：

function fadeInRestoreSpace(element) {
  $(element).css('visibility', 'visible').animate({ opacity: 1 }, 500);
}

2. 给列添加固定占位容器 #

给每个col-sm-3外面套一个和列尺寸一致的容器，当列隐藏时，用空占位元素撑住容器空间，适配动态高度的场景。

调整HTML结构：

<div class="row">
  <div class="col-sm-3 col-container">
    <div class="col-content">
      <!-- 原列内容 -->
      <button class="hide-btn">隐藏</button>
    </div>
    <div class="col-placeholder" style="display: none;"></div>
  </div>
  <!-- 其余3个列同理 -->
</div>

JS逻辑实现：

$('.hide-btn').on('click', function() {
  const $content = $(this).closest('.col-content');
  const $placeholder = $content.siblings('.col-placeholder');
  
  $content.fadeOut(500, function() {
    // 获取内容高度并设置给占位元素，撑住空间
    $placeholder.height($content.height()).show();
  });
});

3. 利用Bootstrap内置的invisible类 #

Bootstrap 4自带的.invisible类本质就是visibility: hidden，不会影响布局。结合它和自定义动画可以实现平滑过渡：

$('.hide-btn').on('click', function() {
  const $col = $(this).closest('.col-sm-3');
  $col.animate({ opacity: 0 }, 500, function() {
    $(this).addClass('invisible');
  });
});

// 恢复显示的逻辑
$('.show-btn').on('click', function() {
  const $col = $(this).closest('.col-sm-3');
  $col.removeClass('invisible').animate({ opacity: 1 }, 500);
});

这个方法最贴合Bootstrap的设计风格，不需要额外编写过多CSS。

总结来说，三个方法的核心都是保留元素在布局中的占位：如果列高度固定，用第一种或第三种最省心；如果列高度动态变化，第二种方法适配性更强。

内容的提问来源于stack exchange，提问作者J.G.Sable