使用row包裹所有筛选项并配合col-12 col-md-6 col-lg-4实现响应式布局，避免单独row导致堆叠错乱；需确保col为row直接子元素、用h-100+d-flex+flex-column拉齐高度、stretched-link扩大触控区。
直接用 row 包所有筛选项，每个筛选项用 col-12 col-md-6 col-lg-4 控制列数，就能实现响应式网格卡片布局——不需要 JS 计算列数，也不用手写媒体查询。关键不是“怎么让卡片响应式”，而是“怎么让筛选项不崩、不溢出、点击区域够大”。
为什么筛选项必须套在同一个 row 里
常见错误是给每个筛选卡片单独加 row：<div class="row"><div class="col-md-4">…</div></div>。结果每张卡片独占一行，row 的负 margin 还会和外层容器冲突，留白失控。
-
row是 Bootstrap 栅格的 flex 容器，只有它存在，col才能按断点换行 - 漏掉
row或把它写错层级（比如放在container外），col就退化成普通块级元素，垂直堆叠 - 筛选项必须是
row的直接子元素，中间不能插div包装层，否则宽度计算失准
col-12 col-md-6 col-lg-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 h-100 - 内部文字内容区加
flex-grow-1，保证底部对齐 - 图标用
bi-filter这类 Bootstrap Icons 类，别用固定宽高的img - 禁用
mb-2/mt-2这类垂直间距类，统一用row上的g-3控制列间间隙
移动端点击区域太小？stretched-link 是最简解法
默认 btn 或 badge 的 padding 是 0.375rem 0.75rem（约 6×12px），远低于 WCAG 要求的 44×44px 可触控区。
- 把整个筛选项（即
col内）包一层a或button，再加stretched-link，链接区域自动填满父容器 - 同时加
text-decoration-none去掉下划线，视觉不变，触控面积翻倍 - 别给
col加cursor: pointer——它没事件绑定，纯装饰，用户点不中
真正容易被忽略的是：筛选项内部别用固定高（如 height: 40px），否则小屏下文字换行会撑破容器；过滤标签联动时，每个 badge 必须绑定唯一 data-filter-key 和 data-filter-value，而不是靠 innerText 匹配。
