如何在移动端/桌面端切换Bootstrap列类？（Thymeleaf+Spring Boot）

方法一：直接用Bootstrap 5原生响应式列类（推荐） #

Bootstrap 5本身支持移动端优先的响应式布局，不需要后端介入就能实现不同屏幕尺寸下的列宽切换。你只需要给列元素同时指定小屏（xs，<576px）和大屏（比如sm及以上）的列类即可：

<div class="row">
  <div class="col-8 col-sm-9">
    hello
  </div>
  <div class="col-4 col-sm-3">
    world
  </div>
</div>

• col-8/col-4：针对**小屏移动端（<576px）**生效
• col-sm-9/col-sm-3：针对**sm及以上尺寸的屏幕（≥576px）**生效

Bootstrap会自动根据屏幕宽度切换对应的列宽，这是最简洁高效的方案，完全符合Bootstrap的设计理念。

方法二：用Thymeleaf动态控制列类（后端驱动场景） #

如果你的列宽切换逻辑需要后端数据或条件判断（比如根据用户角色、配置参数等动态调整），可以用Thymeleaf的动态class属性来实现：

方式1：使用th:class直接生成类名 #

<div class="row">
  <div th:class="${isMobile ? 'col-8' : 'col-9'}">
    hello
  </div>
  <div th:class="${isMobile ? 'col-4' : 'col-3'}">
    world
  </div>
</div>

在Spring Boot的Controller中，你需要把判断逻辑的结果（比如isMobile布尔值）传入Model：

@GetMapping("/your-page")
public String yourPage(Model model, HttpServletRequest request) {
    // 这里可以通过请求头、设备检测工具判断是否为移动端
    boolean isMobile = // 你的判断逻辑，比如解析User-Agent
    model.addAttribute("isMobile", isMobile);
    return "your-template";
}

方式2：使用th:classappend追加类名 #

如果基础类不变，只是根据条件追加响应式类，也可以用th:classappend：

<div class="row">
  <div class="col-9" th:classappend="${isMobile ? 'col-8' : ''}">
    hello
  </div>
  <div class="col-3" th:classappend="${isMobile ? 'col-4' : ''}">
    world
  </div>
</div>

注意：这种方式需要确保Bootstrap的优先级正确，小屏类会覆盖大屏类（因为移动端优先）。

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