Bootstrap卡片实时搜索优化：消除搜索后空白间隔问题

这个问题很常见，原因其实一目了然：你现在只切换了.card元素的显示状态，但它的父容器.col-md-4还在页面上占据着布局空间——Bootstrap的列（col）本身就有宽度和间距设置，哪怕里面的卡片隐藏了，列的占位依然存在，自然会留下空白。

下面给你两种实用的解决方案：

方案1：直接切换列（col-md-4）的显示状态 #

既然空白是列的占位导致的，那我们直接操作列的显示/隐藏就好了，把筛选目标从.card改成.col-md-4，同时检查列内卡片的文本是否匹配搜索关键词：

$(document).ready(function () {
  $("#anythingSearch").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#myDIV .col-md-4").filter(function () {
      // 获取当前列内卡片的文本内容
      var cardContent = $(this).find(".card").text().toLowerCase();
      // 切换列的显示状态
      $(this).toggle(cardContent.indexOf(value) > -1);
    });
  });
});

方案2：用Bootstrap工具类控制显示（更符合框架规范） #

Bootstrap提供了d-none类，它会将元素设置为display: none，彻底移除占位。我们可以用addClass和removeClass来切换这个类，比原生的toggle()更贴合Bootstrap的使用习惯：

$(document).ready(function () {
  $("#anythingSearch").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $("#myDIV .col-md-4").each(function () {
      var cardContent = $(this).find(".card").text().toLowerCase();
      if (cardContent.indexOf(value) > -1) {
        $(this).removeClass("d-none");
      } else {
        $(this).addClass("d-none");
      }
    });
  });
});

额外优化建议 #

如果想让剩下的卡片自动填充布局空间，避免出现零散的空白，可以给你的row元素加上Bootstrap的row-cols类，比如：

<div id="myDIV">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <!-- 你的col-md-4和card元素 -->
  </div>
</div>

row-cols-md-3会在中等及以上屏幕自动每行显示3列，row-cols-1则在小屏幕显示1列，g-4用来控制列之间的间距，配合上面的隐藏列方法，布局会更流畅自然。

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