我在jQuery中有一個foreach語句，為列表中的每個產品創建一個div(引導卡)。現在，如果只使用自舉卡來做這件事，在4或5張卡之后，卡片的寬度將會變得太小，無法容納任何東西。

現在我不知道如何用語言來解釋這個，但是我想如果有三個像這樣的分割:

div | div | div

第四個div必須自動放置在第一個div的下面，就像這樣:

div | div | div |

| div

但我想不出一種方法來做到這一點，我認為有一種方法可以通過bootstrap的網格系統來做到這一點，但我也想不出來

以下是我的代碼:

<div class="row justify-content-md-center">
    <div class="col-12">
        <table class="table table-striped">
            <div id="card-deck" class="card-deck">
                 //inside of this area the foreach is running    
            </div>
        </table>
    </div>
</div>

你可以試試這個:

.card-deck {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: flex-start;
}
.card {
    width: 350px;
}

這種方法的唯一缺點是，如果你的卡片寬度與屏幕大小不成比例，它會在每行的末尾留下一個空白點。

你可以通過設置卡片的百分比寬度和最小寬度來解決這個問題。