laoyang
832f112843
筛选区改成固定两行,分类再多也不会把表单挤走
用户:「筛选的时候,反馈类型和后面的下拉框不在一条线上;
如果反馈类型比较多,下拉框就被挤到下一行去了。
建议统一成分两行,这样也就没有对齐的问题了。」
问题根因:
.filters 是 display:flex + flex-wrap,分类 chips 和筛选表单被当成
同一行的兄弟元素,分类一多就把表单挤下去;
而且两者高度形态不同(chips 是胶囊、表单是控件),本来也对不齐。
改法:固定两行,各管各的
第 1 行 = 反馈类型 chips(内部可换行,不影响别的)
第 2 行 = 状态 / 排序 / 搜索框 / 搜索按钮(同一行,高度一致)
.filters 改 flex-direction:column。
关键点:文件里有两处 .filters 定义,后面那处(管理后台用)
是 display:flex + flex-wrap,会把前台的两行布局覆盖回横向。
已删除那处的 flex 声明,只保留对内部控件的宽度约束。
后台筛选栏是纯控件横排、没有分类 chips,不能跟着变竖排,
所以给 admin.php 的筛选表单加了 .filters-row 类,
用 .filters.filters-row 覆盖回 row。
验证(真实页面 + 注入 16 个额外分类,共 21 个):
视口 1280px:chips y 109→276,表单 y 286(在下方)✅ 表单内控件 1 行
视口 900px:同上 ✅
视口 700px:同上 ✅
视口 500px:chips y 103→400,表单 y 410(在下方)✅
表单内部换成 2 行 —— 窄屏放不下 4 个控件属正常响应式
前台 .filters flex-direction = column
后台 .filters.filters-row flex-direction = row,控件全在同一条线上
(垂直中心统一 92.8)
5 个路由 200
另外修掉一个隐患:改 .filters 时误删了 .chips 的基础 flex 样式,
已补回(.chips{display:flex;flex-wrap:wrap;gap:8px})。
2026-11-04 20:31:17 +08:00
..
2026-11-04 19:27:01 +08:00
2026-11-03 08:27:03 +08:00
2026-11-04 20:31:17 +08:00
2026-09-28 20:34:37 +08:00
2026-11-03 09:54:12 +08:00
2026-11-04 19:31:55 +08:00
2026-11-04 19:17:20 +08:00
2026-11-03 07:21:04 +08:00
2026-11-04 19:31:55 +08:00