Spring Boot Thymeleaf -将数据拆分为2列

Question

我使用的是spring boot 2.5和Thymeleaf 3.0.12。我有一个字符串列表，我想在两列中显示它。下面是我目前使用的代码片段：

<div class="row">
    <div class="col-sm-6">
        <div class="form-check"  th:each="service : ${services}" th:if="${serviceStat.odd}">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_'+serviceStat.count}"/> 
            <label  class="form-check-label" th:text="${'myStr'+'_'+serviceStat.count}"></label>
        </div>
    </div>  
    <div class="col-sm-6">
        <div class="form-check" th:each="service : ${services}" th:if="${serviceStat.even}">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_'+serviceStat.count}"/> 
            <label  class="form-check-label" th:text="${'myStr'+'_'+serviceStat.count}"></label>
        </div>
    </div>
</div>

这与预期的一样。

​

但是这种方法需要两次列表迭代。我怀疑我的列表是否很大，我的页面可能会变得很慢。有没有办法在单次迭代中达到同样的效果？

Answer 1

我们可以在一个循环中做到这一点。诀窍是使用bootstrap div执行th:each，bootstrap将负责在两列中对齐它们。OP恰好在col-sm-6目录中有th:each。

<div class="row">
    <div class="col-sm-6" th:each="service : ${services}">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="serviceChk" th:id="${'serviceChkBox_'+serviceStat.count}"/>
            <label  class="form-check-label" th:text="${'myStr'+'_'+serviceStat.count}"></label>
        </div>
    </div>
</div>

注意-- col-sm-6是小屏幕的断点。使用https://getbootstrap.com/docs/4.1/layout/grid/#grid-options为您的需求选择正确的断点。