对齐卡片后的过滤功能

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

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