过滤功能后对齐卡片

Question

我正在使用 javascript 在我的卡片之间进行过滤。它工作正常，只是我无法将过滤后的卡片与左上角对齐。它保留在原来的同一列中（并且同时也在同一行中）。这是一个例子： 错误 这就是我想要的： 好

我的代码：

 function myFunction() {

      var input, filter, cards, cardContainer, title, i;

      input = document.getElementById("myFilter");

      filter = input.value.toUpperCase();

      cardContainer = document.getElementById("myItems");

      cards = cardContainer.getElementsByClassName("card");

      for (i = 0; i < cards.length; i++) {

        title = cards[i].querySelector(".card-body h4.card-category");

        if (title.innerText.toUpperCase().indexOf(filter) > -1) {

          cards[i].style.display = "";

        } else {

          cards[i].style.display = "none";

        }

      }

    }

Answer 1

刚刚想通了。问题出在这一行：cards = cardContainer.getElementsByClassName("card");我把它改为cards&nbsp;=&nbsp;cardContainer.getElementsByClassName("col-md-4");因为我的卡片类位于 col-md-4 类中，并且无法设置其显示属性。