每行数量由Bootstrap 5响应式类控制：小屏堆成一列（col-12）、中屏两列（col-md-6）、大屏三列（col-lg-4），且row必须包裹所有筛选项，每个筛选项为col，否则flex布局失效。
筛选项怎么用 Bootstrap 网格控制每行数量
小屏堆成一列、中屏两列、大屏三列，不是靠 js 动态计算，而是直接用 bootstrap 5 的响应式类组合。关键不是“怎么写”，而是“写在哪一层”——row 必须包住所有筛选项，每个筛选项是 col，否则 flex 布局不生效。
-
col-12：超小屏（ -
col-sm-6 col-md-4 col-lg-3：从平板开始分两列，中屏三列，大屏四列；注意这里不是“越多越好”，列数太多会导致单个筛选控件高度失控，尤其带 label + select + button 的组合 - 别在
col里再套row：除非你真需要内部再分左右结构（比如“价格区间”含两个input），否则会引入额外 margin/padding，破坏对齐 - 如果某筛选项内容特别长（如多选标签云），加
flex-wrap到父col的 style 里，或用text-truncate防溢出
过滤标签（Filter Chips）怎么和筛选项联动且不卡顿
用户点“品牌=小米”后，顶部出现一个可关闭的 badge，这不是纯视觉装饰——它得能反向清除对应筛选条件，且不能每次点击都重绘整个列表。
- 每个过滤标签必须绑定唯一标识，比如
data-filter-key="brand"和data-filter-value="xiaomi"，而不是只靠 innerText 匹配 - 清除时不要调
filterForm.reset()：它会清空所有字段，包括用户还没提交的临时输入；应只删对应字段值，再触发自定义filter-change事件 - DOM 更新别用
innerHTML = newHTML：超过 5 个标签就明显卡顿；改用element.classList.toggle("d-none")或removeChild()直接删节点 - 移动端点击关闭按钮容易误触背景，给
.badge加touch-action: manipulation，避免 300ms 延迟
为什么 dropdown-menu 里的筛选项一点就收起
这是最常踩的坑：dropdown-menu 默认监听外部 click 关闭，而你点的是里面的 input 或 checkbox，事件冒泡上去就被当“外部点击”处理了。
- 所有可交互子元素（
input、select、button、.form-check-input）的click和focus事件里，必须加event.stopPropagation() - 别用
data-bs-toggle="dropdown"控制整个筛选区——dropdown 是为菜单设计的，不是为表单容器；改用collapse或手写 show/hide 类切换 - 如果用了
collapse，记得设data-bs-parent指向唯一 ID，否则多个折叠面板会互相干扰 - iOS Safari 对
range滑块支持差，点不动；降级方案是用两个input[type="number"]，并加min/max属性限制范围
筛选后表格刷新，但过滤标签没同步更新怎么办
状态不同步的本质是“视图没反映模型”。你改了 DOM，但没改 JS 里的筛选配置对象，下次用户点“重置”或切页就会出错。
- 所有筛选值必须集中存到一个 plain object 里，比如
const filters = { brand: [], price_min: null, in_stock: true }，而不是遍历 DOM 取value - 每次用户操作（change、input、click），先更新这个对象，再调用
renderFilterChips(filters)和applyFilters(filters) - 表格刷新别只改
tbody：DataTables 这类插件要调table.rows().invalidate().draw()，原生 table 则用documentFragment批量插入，避免 layout thrashing - URL 参数同步容易被忽略：用户分享链接时，应把
filters序列化进location.search，页面加载时优先读 URL 再初始化表单
