如何解决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;
}
但是,我仍然在这里等待专家的建议,因为我想出的解决方案看起来更像是补丁程序,而不是干净的解决方案。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。