筛选功能须独立于网格容器，避免嵌套.row导致响应式失效；筛选区应单独包裹并用d-flex布局，网格项必须为.col-*直接子元素，筛选逻辑优先用data属性和classList操作，移动端筛选入口需固定底部或用offcanvas。
筛选功能必须独立于网格容器，否则响应式会失效
很多人把 input 或 select 塞进 .row 里，结果小屏下输入框被压缩、按钮错位、筛选逻辑失效。bootstrap 的网格系统只管列宽和换行，不处理表单控件的流式行为。筛选区域得用 .container 或 .row 外层包裹，再配合 mb-4 或 pb-3 预留间距。
常见错误写法：<div class="row"><div class="col-12"><input type="search"></div></div>
这样会让搜索框参与网格计算，尤其在 col-md-6 下它会被强制等宽，失去自适应宽度能力。
- 正确做法：筛选区单独成块，不套
.col-*类 - 用
form-control+w-100（或col-12 col-md-auto）控制宽度 - 按钮统一用
btn btn-outline-secondary，避免小屏下文字溢出 - 如果要并排搜索+筛选下拉，用
d-flex flex-wrap替代.row，更可控
网格列表本身别嵌套容器，图标/卡片直接挂 col-*
你不是在布局“一堆盒子”，而是在布局“可筛选的项”。每个项（比如图标+文字、卡片、缩略图）必须是 .col-* 的直接子元素，中间不能插 <div class="item"> 这类包装层——否则 <code>col-6 col-md-4 的百分比计算会因内边距、浮动干扰而失准，小屏下容易多出空白列或换行错位。
- ✅ 正确：
<div class="col-6 col-md-4"> <i class="bi bi-heart"></i><div>喜欢</div> </div> - ❌ 错误：
<div class="col-6"><div class="icon-wrapper"> <i></i><div>喜欢</div> </div></div> - 小屏文字折行？加
d-flex flex-column align-items-center和text-truncate，别靠text-center硬撑 - 图标大小不一？统一用
fs-2或style="font-size:1.5rem"，避免列高被撑开
筛选逻辑别用 DOM 遍历硬过滤，优先用 CSS data- 属性 + classList.toggle
用 querySelectorAll('.grid-item') 再逐个 style.display = 'none' 是最慢也最容易漏掉响应式状态的方式。用户切到平板再切回手机，隐藏项可能没恢复；或者筛选后触发 resize，布局错乱。
- 给每个网格项加语义化
data-category="news"、data-tag="urgent" - 筛选时只操作
classList.add('d-none')/classList.remove('d-none')，依赖 Bootstrap 自带的显示/隐藏类 - 避免手动改
style，否则媒体查询生效时样式冲突（比如display: none !important覆盖了col-12的 flex 行为） - 需要动画？用
fade类配合opacity+transition，别用height动画——网格项高度不固定，会抖动
移动端筛选按钮位置容易被忽略
桌面端放顶部没问题，但手机上用户手指够不到顶部，又不愿滚上去点筛选。很多项目上线后才发现筛选入口埋得太深。
- 小屏（
max-width: 768px）建议把筛选入口固定在底部：用position-sticky bottom-0 bg-white p-2 shadow-sm - 或者用
offcanvas，按钮放在右上角btn btn-sm btn-outline-primary，不占主视觉空间 - 千万别用
float-end或ms-auto把筛选塞到右上角——小屏宽度不够时按钮会被截断 - 测试时真机滑动到底部，确认筛选按钮不会被虚拟键盘顶起或遮挡
