javascript - 过滤功能后对齐卡片

Question

我正在使用 javascript 在我的卡片之间进行过滤。它工作正常，除了我无法将过滤后的卡片与左上 Angular 对齐。它保留在它所在的同一列中(并且同时在同一行中)。下面是一个例子:
wrong
这就是我想要的:
good

我的代码:

    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 = cardContainer.getElementsByClassName("col-md-4");

因为我的卡片类在 col-md-4 类中，它无法设置它的显示属性。