响应式筛选网格需用单个row包裹所有筛选项，避免多row嵌套导致栅格失效；通过data属性+classList控制显隐，用stretched-link扩大点击区域，d-flex+h-100拉齐高度，g-3统一间隙。
直接用 row + col 断点类就能实现响应式筛选网格，关键不是“怎么加标签样式”，而是“怎么让筛选项不崩、不溢出、点击区域够大、过滤逻辑不和响应式冲突”。
筛选项必须套在单个 row 里，不能每个都包 row
常见错误是这样写：
<div class="row"><div class="col-md-3">标签1</div></div> <div class="row"><div class="col-md-3">标签2</div></div>
结果每行只有一列，row 的负 margin 和外层容器冲突，上下留白失控，小屏下还可能错位。正确结构只有一个 row 包所有筛选项，每个项用 col-* 控制宽度：
-
row必须是container或container-fluid的直接子元素 - 别在筛选项内部再嵌套
row，否则栅格计算失效 - 如果筛选项带图标+文字，最小断点建议从
col-md-6开始，避免 iPad 竖屏（768px）误触发两列导致文字挤在一起
过滤标签的悬停/选中样式要靠 data- 属性 + classList 控制
别用 style.display = 'none' 手动隐藏网格项——resize 或切换设备后状态容易丢失，且和 Bootstrap 媒体查询冲突（比如 display: none !important 覆盖 col-12 的 flex 行为）。正确做法是：
- 给每个筛选项加语义化
data-category="news"、data-tag="urgent" - 给网格项统一加
grid-item类，初始不隐藏 - 筛选时只操作
grid-item.classList.add('d-none')或.remove('d-none')，依赖 Bootstrap 原生d-none类 - 悬停/选中态用 CSS 写：
.filter-tag:hover, .filter-tag.active { background: #0d6efd; color: #fff; }
移动端点击区域太小？用 stretched-link 最简解决
默认 btn 或 badge 的 padding 是 0.375rem 0.75rem（约 6×12px），远低于 WCAG 要求的 44×44px 可触控区。手动加大 padding 会破坏栅格高度一致性。解决方案：
- 把整个筛选项（即
col内容）包一层<a href="#" class="stretched-link"> - 同时加
text-decoration-none去掉下划线，视觉不变，触控面积自动填满父容器 - 别给
col加cursor: pointer——它没事件绑定，纯装饰，用户点不中 - 确保
col内部没有固定高（如height: 40px），否则小屏文字换行会撑破容器
高度不一致导致网格错位？用 d-flex flex-column h-100 拉齐
当某个筛选项文字多两行、另一个只有图标时，col 高度不同，下一行会错位——这不是 Bug，是 Flex 默认不等高。解决方法：
- 给每个
col加d-flex flex-column h-100 - 内部文字内容区加
flex-grow-1，保证底部对齐 - 图标用
bi类（如bi-filter），别用固定宽高的<img> - 统一用
row上的g-3控制列间间隙，禁用mb-2/mt-2这类垂直间距类
真正容易被忽略的点：筛选区必须独立于网格容器，不能塞进 row 里；col-12 在移动端可省略（默认行为），但 col-md-6 这类断点类必须显式声明，否则小屏下会继承上一级宽度，导致错乱。
