From 832f11284348d982824425b100304b17142dd225 Mon Sep 17 00:00:00 2001 From: laoyang Date: Wed, 4 Nov 2026 20:31:17 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=8C=BA=E6=94=B9=E6=88=90?= =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E4=B8=A4=E8=A1=8C=EF=BC=8C=E5=88=86=E7=B1=BB?= =?UTF-8?q?=E5=86=8D=E5=A4=9A=E4=B9=9F=E4=B8=8D=E4=BC=9A=E6=8A=8A=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E6=8C=A4=E8=B5=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户：「筛选的时候，反馈类型和后面的下拉框不在一条线上； 如果反馈类型比较多，下拉框就被挤到下一行去了。 建议统一成分两行，这样也就没有对齐的问题了。」 问题根因： .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}）。 --- admin.php | 2 +- assets/style.css | 44 ++++++++++++++++++++++++++++++++++++++------ lib/bootstrap.php | 2 +- 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/admin.php b/admin.php index 9e37951..779485b 100644 --- a/admin.php +++ b/admin.php @@ -710,7 +710,7 @@ fb_layout_head('管理后台', ['robots' => 'noindex,nofollow', 'admin' => true] $lst->execute($args); $rows = $lst->fetchAll(); ?> -
+