加了thymeleaf的th:标签后div无法显示在同一行

Question

想用th:switch来显示指定html内容。有没有什么其他方法可以做到这种效果。th:标签写在div里，div会自动换行。
用了display:inline-block等方法也不行。原因应该就是多了一层div。

具体问题：
使用th:each后每个col都独占一行，不能一行多个显示

<div class="row filterable-content">
         <div th:each="item, itemStat: ${xxxx_list}" th:switch="${item.xxxx_area}">
                  <!-- col start -->
                  <div th:case="1" class="col-sm-6 col-xl-3 filter-item 1">
                          xxx
                  </div>
                  <!-- end col -->
          </div>
</div>

原来这样是正常显示的：

<div class="row filterable-content">
           <!-- col start -->
           <div class="col-sm-6 col-xl-3 filter-item 1">
                  xxx
          </div>
          <!-- end col -->
</div>

更新：因为data-rel的需要，所以我想用实现不同内容不同class的效果，因为th:classappend只支持2种情况。现在已经解决了。把th:each放在table标签里即可，不会多一层容器。

<div class="text-center filter-menu">
                                <a href="javascript: void(0);" class="filter-menu-item active" data-rel="all">所有</a>
                                <a href="javascript: void(0);" class="filter-menu-item" data-rel="**1**">1</a>
                                <a href="javascript: void(0);" class="filter-menu-item" data-rel="**2**">2</a>
                            </div>

<div class="row filterable-content">                        
           <table th:each="item, itemStat: ${xxxx_list}" th:switch="${item.no}">                             
                    <div th:case="1" class="col-sm-6 col-xl-3 filter-item **all 1**">
                        </div>
                        <div th:case="2" class="col-sm-6 col-xl-3 filter-item **all 2**">
                        </div>
                </table>
    </div>

其他：用了bootstrap的框架。是一个springboot项目。

Answer 1

应该是可以写在一起的吧（好久不写，应该是这样）

<div class="row filterable-content">
           <!-- col start -->
           <div th:each="item, itemStat: ${xxxx_list}" th:if="${item.xxxx_area} eq '1' " class="col-sm-6 col-xl-3 filter-item 1">
                  xxx
          </div>
          <!-- end col -->
</div>