应将筛选区域与列表区域完全解耦：筛选区独立于row外并用py-3或mb-4留白，列表区用独立row包裹卡片；col-*类须从移动端写起且顺序不可颠倒，如col-12 col-sm-6 col-md-4 col-lg-3；更新列表时避免innerhtml清空，应逐个remove旧项并用createelement创建新节点后批量append。
直接用 row + col-* 控制网格，筛选逻辑独立于栅格，别把筛选控件塞进 col 里破坏流式布局。
筛选区域必须脱离栅格容器，用 mb-4 或 py-3 隔开
常见错误是把搜索框、下拉菜单等筛选控件也包进 row 里，比如：
<div class="row"> <div class="col-12"><input type="search"></div> <div class="col-12 col-md-6"><select></select></div> <div class="col-12 col-md-6"><div class="row">...卡片</div></div> </div>
这会导致小屏下筛选项和内容挤成一列、间距失控、断点切换时错位。正确做法是让筛选区和列表区完全解耦：
- 筛选区单独放在
row外，加py-3或mb-4提供上下留白 - 列表区用独立的
<div class="row"> 包裹，只管卡片/条目本身 <li>筛选控件统一用 <code>w-100（小屏）+col-md-auto（中屏以上并排）控制宽度，不依赖栅格列数
col-* 类必须从移动端写起，且顺序不能颠倒
比如想实现「手机单列 → 平板双列 → 笔记本三列 → 大屏四列」，必须写成：
<div class="col-12 col-sm-6 col-md-4 col-lg-3">...</div>
而不是反过来写 col-lg-3 col-md-4 col-sm-6 col-12。后者在小屏下会继承 col-12 的声明，但因 CSS 层叠规则，col-lg-3 的样式仍可能泄漏到小屏，导致宽度计算异常。关键点：
-
col-12在 ≤575px 生效，强制单列；它不可省略，否则小屏可能继承上级断点类 -
col-sm-6从 576px 起生效，适配 iPhone SE、部分安卓小屏 -
col-md-4是主力断点（≥768px），比col-sm更稳——很多平板竖屏就卡在 768px，col-sm容易过早触发双列 - 所有
col-*必须套在同一个row下，不能每个卡片自己包一个row
筛选后重绘列表时，别用 innerHTML = '' 清空再拼接
手动拼 HTML 字符串容易 XSS 漏洞，且破坏 DOM 结构稳定性。尤其当卡片含 data-bs-toggle、data-bs-target 等 Bootstrap 交互属性时，重新注入后 JS 绑定会丢失。
更稳妥的方式：
- 用
document.querySelectorAll('.grid-item')找出所有条目，逐个调用.remove() - 新数据用
document.createElement('div')创建节点，设好className = 'col-12 col-sm-6 col-md-4 col-lg-3'再 append 到row - 如果用模板引擎（如 Handlebars），确保编译后插入的是 DocumentFragment，而非字符串
- 避免在循环中反复操作 DOM —— 先 collect 所有新节点，最后一次性
row.append(...nodes)
图片和文字高度不一致？优先用 h-100 + d-flex flex-column
卡片内图文混排时，标题长短、图片缺失、描述行数不同，会让 row 里的卡片像楼梯一样错位。这不是栅格 bug，而是内容高度没约束。
别用 min-height: 200px 这种像素值方案 —— 字体缩放、行高差异、DPI 变化都会让它失效或截断内容。
- 给每个卡片加
h-100，确保它占满所在col的高度 - 卡片内部用
d-flex flex-column h-100，让标题、图片、描述按垂直流排列 - 图片加
img-fluid和object-fit: cover（需额外 CSS），防止拉伸变形 - 长文本用
text-truncate或style="display: -webkit-box; -webkit-line-clamp: 2;"限制行数
真正难的不是筛出数据，而是筛选后卡片高度还能对齐 —— 这得靠 flex 布局撑住内部结构，而不是靠栅格类硬扛。
