直接用 row+col组合+断点类即可实现响应式筛选项，关键在于避免网格崩塌溢出、确保点击区域足够大。正确结构是一个row包所有筛选项，每个项用col-*控制宽度；需遵循移动优先断点（col-12/col-md-6/col-lg-4），配合d-flex flex-column+h-100拉齐高度，用stretched-link扩大触控面积。
直接用 row + col 组合 + 断点类就能实现，不需要 js 控制列数或媒体查询手写。关键不是“怎么让筛选项响应式”，而是“怎么让筛选项网格不崩、不溢出、点击区域够大”。
筛选项必须套在 row 里，不能每个 col 单独包 row
常见错误是把每个筛选按钮/标签都写成：<div class="row"><div class="col-md-3">…</div></div>——结果每行只有一列，上下留白失控，row 的负 margin 还会和外层容器冲突。
- 正确结构：一个
row包所有筛选项，每个筛选项用col-*控制宽度 -
row必须是container或container-fluid的直接子元素 - 筛选项内部别用固定高（如
height: 40px），否则小屏下文字换行会撑破容器
col-sm-6 和 col-md-4 的断点选法有实际设备依据
别凭感觉写 col-sm-6。真实访问中，iPad 竖屏宽 768px，已触发 sm（≥576px），但此时两列并排常导致文字挤在一起、图标太小。
- 推荐组合（移动优先）：
col-12（≤575px，手机竖屏单列）、col-md-6（≥768px，平板横屏/小笔记本两列）、col-lg-4（≥992px，标准笔记本三列） -
col-12在移动端可省略（默认行为），但col-md-6这类断点类必须显式声明，否则小屏下会继承上一级宽度，导致错乱 - 如果筛选项带图标+文字，建议最小断点从
md开始，避免 iPad 竖屏误触发
筛选项高度不一致？用 h-100 + d-flex flex-column 拉齐
当某个筛选项文字多两行、另一个只有图标时，col 高度不同，下一行会错位——这不是 Bug，是 Flex 默认不等高。
- 给每个
col加d-flex flex-column，再给内部容器（如btn或badge）加h-100 - 文字内容区加
flex-grow-1，保证底部对齐；图标用bi类（如bi-filter），别用固定宽高的img - 禁用
mb-2/mt-2这类垂直间距类，统一用row上的g-3控制列间间隙
移动端点击区域太小，stretched-link 是最简解法
默认 btn 或 badge 的 padding 是 0.375rem 0.75rem（约 6×12px），远低于 WCAG 要求的 44×44px 可触控区。
- 把整个筛选项（
col内）包一层<a href="#" class="stretched-link"></a>，链接区域自动填满父容器 - 同时加
text-decoration-none去掉下划线，视觉不变，触控面积翻倍 - 别给
col加cursor: pointer—— 它没事件绑定，纯装饰，用户点不中
真正容易被忽略的点是：筛选项的交互反馈（如 active 状态）必须靠 CSS 类控制，而不是 JS 切换 class 后忘记重置其他项；另外，g-3 的间隙值依赖 Bootstrap 的 $spacer 变量，如果项目自定义了该变量，g-3 实际像素会变，需同步检查。
