Bootstrap不提供高级筛选表单组件，需用栅格系统（row/col）布局多列筛选项，结合flatpickr、choices.js等第三方库实现日期范围和多选功能，并通过collapse类与ARIA属性处理动态显隐及控件生命周期。
Bootstrap 本身不提供“高级筛选表单”组件，它只提供基础表单控件（input、select、checkbox 等）和栅格系统。所谓“高级筛选”，实际是靠组合 + JS 交互 + 合理布局实现的，不是开箱即用的功能。
怎么用 Bootstrap 栅格对齐多行多列筛选项
高级筛选常需并排放置多个条件（如“开始时间”“结束时间”“状态”“关键词”），但默认 form-control 是块级元素，直接写会垂直堆叠。关键不是加插件，而是用 row 和 col 控制宽度与换行逻辑：
- 每行用
<div class="row"> 包裹，避免 margin 折叠问题 <li>单个筛选项用 <code><div class="col-md-3"> 这类响应式类控制宽度（<code>md表示 ≥768px 时生效） - 需要“操作区”（如“搜索”“重置”按钮）独占一行或右对齐时，加
text-md-end或单独套col-12 - 别在
col内部再嵌套row做微调——容易触发 Bootstrap 的负 margin 行为，导致错位 -
flatpickr或tempusdominus是较轻量的日期范围方案；接入后，把input的class="form-control"保留，再额外加初始化代码，否则 Bootstrap 的圆角/边框会丢失 - 多选下拉推荐
choices.js，初始化时传入searchEnabled: true和itemSelectText: ""（去掉默认的“点击选择”提示） - 所有第三方控件渲染出的 DOM 都可能脱离原始
col容器流，检查是否被position: absolute撑开导致换行异常——必要时给父col加position: relative - 别用
form-select直接套multiple属性做多选：原生多选框在不同浏览器中高度/交互差异大，移动端几乎不可用 - 用
aria-expanded和aria-controls属性标记开关按钮与目标区域，例如：<button aria-expanded="false" aria-controls="advanced-filters">更多条件</button> - 切换时用
classList.toggle("show")配合 Bootstrap 的.collapse类，它自带 height 过渡和 a11y 支持 - 别手动写
style.height = "0"——collapse依赖scrollHeight计算，硬设会破坏动画 - 如果“更多条件”里有
flatpickr或choices，要在shown.bs.collapse事件里重新初始化，否则首次点击展开时控件不响应
怎么让日期范围、下拉多选这类控件真正可用
Bootstrap 5 不内置日期选择器或增强型 select，必须引入第三方库，并注意样式融合：
怎么用 JavaScript 实现“动态显隐筛选区块”
用户常需要折叠/展开“更多条件”，这不能只靠 CSS display: none 切换，否则影响可访问性（屏幕阅读器无法感知）和动画体验：
真正的难点不在“怎么堆 Bootstrap 类”，而在于第三方控件与 Bootstrap 的生命周期对齐——比如折叠区块里的日期控件，没等它渲染完就执行了 flatpickr()，结果空白；或者重置表单时只清了 input.value，却忘了调用 choices.destroy()，下次展开就出现双份选项。这些细节不写在文档里，但线上一跑就露馅。
