Thymeleaf-如何使用Bootstrap 4.5.0+迭代HTML的多列中的对象列表

问题描述

我在Thymeleaf模板中具有以下内容：

<div class="row col-md-12">
        <div th:each="item : ${itemList}">
            <div class="col-md-3">
                <div class="card custom-card"
                    style="width: 15rem; display: inline-block">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${'item Id - ' + item.id}">Id</h5>
                        <p class="card-text" th:text="${item.itemname}">Name</p>
                        <p class="card-text" th:text="${item.itemdescription}">Desc</p>
                        <a th:href="@{'/createforItemId/' + ${item.id}}"
                            class="stretched-link btn btn-sm btn-primary mr-2"><i
                            class="fas fa-rocket mr-2"></i> Start New discussion</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

我正在尝试以each row in my html should have 4 cards in 4 columns (12/3)的方式迭代itemList。

但是目前我的对象列表中只有一个“单”列（巨大）。

我在这里缺少什么？

我也愿意寻求其他解决方案。请提出建议。

解决方法

ODD，但我有一个解决方法，几乎​​就是我想要的。以下是对我有用的技巧（请注意，table不包含<td></td>）：

<table style="width: 100%">
        <tr th:each="item : ${itemList}">
            <div class="card custom-card text-center mr-2 mt-2 ml-2 mb-2"
                    style="width: 15rem; display: inline-block">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${'item Id - ' + item.id}">Id</h5>
                        <p class="card-text" th:text="${item.itemname}">Name</p>
                        <p class="card-text" th:text="${item.itemdescription}">Desc</p>
                        <a th:href="@{'/createforItemId/' + ${item.id}}"
                            class="stretched-link btn btn-sm btn-primary mr-2"><i
                            class="fas fa-rocket mr-2"></i> Start New Discussion</a>
                    </div>
                </div>
        </tr>
    </table>

使用此CSS，我很高兴看到4列包含4张卡片的框/卡片的圆角边框：

.custom-card {
    border-radius: 20px;
}

但是，我仍然在这里等待专家的建议，因为我想出的解决方案看起来更像是补丁程序，而不是干净的解决方案。