Spring Boot Thymeleaf实现列表两列展示如何仅用单次遍历完成？

方案1：保持原左右排列逻辑（第1、3、5...项在左，第2、4、6...项在右） #

直接利用Bootstrap栅格自动换行特性，单次遍历即可实现完全一致的效果，无需判断奇偶：

<div class="row">
    <!-- 每个选项占6列，自动每2个换行 -->
    <div class="col-sm-6" th:each="service, serviceStat : ${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>

这个方案和你现有代码的渲染效果完全一致，且仅遍历一次列表，性能最优，改造成本也最低。

方案2：需要先填满左列再填右列的场景 #

如果你的业务要求是左列放前半部分选项、右列放后半部分选项，直接用CSS多列布局实现，同样只需单次遍历：

<!-- 可把样式写在你的全局CSS文件中 -->
<style>
.two-col-list {
    column-count: 2;
    column-gap: 24px; /* 两列间距，可自定义 */
}
.two-col-list .form-check {
    break-inside: avoid; /* 防止单个选项被拆分到两列 */
}
</style>

<div class="two-col-list">
    <div class="form-check" th:each="service, serviceStat : ${services}">
        <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>

两种方案都避免了重复遍历列表，哪怕列表数据量达到数千级也不会出现额外的性能损耗。

内容的提问来源于stack exchange，提问作者kaluva