筛选区改成固定两行,分类再多也不会把表单挤走

用户:「筛选的时候,反馈类型和后面的下拉框不在一条线上;
如果反馈类型比较多,下拉框就被挤到下一行去了。
建议统一成分两行,这样也就没有对齐的问题了。」

问题根因:
.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})。
This commit is contained in:
2026-11-04 20:31:17 +08:00
parent 8db38a834d
commit 832f112843
3 changed files with 40 additions and 8 deletions
+1 -1
View File
@@ -710,7 +710,7 @@ fb_layout_head('管理后台', ['robots' => 'noindex,nofollow', 'admin' => true]
$lst->execute($args); $lst->execute($args);
$rows = $lst->fetchAll(); $rows = $lst->fetchAll();
?> ?>
<form class="filters" method="get" action="admin.php"> <form class="filters filters-row" method="get" action="admin.php">
<input type="hidden" name="tab" value="all"> <input type="hidden" name="tab" value="all">
<input type="text" name="q" value="<?php echo e($qF); ?>" placeholder="搜索标题或正文"> <input type="text" name="q" value="<?php echo e($qF); ?>" placeholder="搜索标题或正文">
<select name="sw" onchange="this.form.submit()"> <select name="sw" onchange="this.form.submit()">
+38 -6
View File
@@ -598,8 +598,34 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
.software-bar .chips{margin-bottom:0} .software-bar .chips{margin-bottom:0}
/* ---------- 筛选(二级:分类 / 状态) ---------- */ /* ---------- 筛选(二级:分类 / 状态) ---------- */
.filters{margin-bottom:16px} /* ---------- 筛选区 ----------
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px} * 用户 2026-11-04:「筛选的时候,反馈类型和后面的下拉框不在一条线上;
* 如果反馈类型比较多,下拉框就被挤到下一行去了。建议统一成分两行,
* 这样也就没有对齐的问题了。」
*
* 之前的问题:.filters 是 flex + flex-wrap,分类 chips 和筛选表单
* 被当成同一行的兄弟元素,分类一多就把表单挤下去,
* 而且两者高度不同(chips 是胶囊、表单是控件),永远对不齐。
*
* 现在:**固定两行,各管各的**
* 第 1 行 = 反馈类型 chips(可换行,不影响别的)
* 第 2 行 = 状态/排序/搜索框/搜索按钮(同一行,高度一致)
* 两行之间用间距分隔,不再有"谁挤谁"的问题。
*
* ⚠️ 这里必须显式写 flex-direction:column 覆盖旧的 display:flex ——
* 文件后面还有一处 .filters 定义(管理后台用),
* 如果只在 HTML 里加类容易漏,直接在这里定死纵向布局最稳。 */
.filters{display:flex; flex-direction:column; gap:10px; margin:18px 0 4px}
/* chips 基础布局(原来的行内样式被合并到这里,别漏) */
.chips{display:flex; flex-wrap:wrap; gap:8px}
/* 第 1 行:分类 chips */
.filters .chips{margin-bottom:0}
/* 第 2 行:筛选表单,自己内部横向排列 */
.filters .filter-row{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
/* 后台的筛选栏是纯控件、没有分类 chips,所以要横排 ——
* 用 .filters-row 覆盖掉前台的两行纵向布局。
* ⚠️ 必须放在 .filters 之后(同一优先级后者生效)。 */
.filters.filters-row{flex-direction:row; flex-wrap:wrap; gap:9px; align-items:center}
.chip{ .chip{
padding:5px 13px; border-radius:999px; background:var(--card); padding:5px 13px; border-radius:999px; background:var(--card);
border:1px solid var(--line); font-size:13.5px; color:var(--fg); border:1px solid var(--line); font-size:13.5px; color:var(--fg);
@@ -1329,10 +1355,16 @@ html.lb-open,body.lb-open{overflow:hidden}
.check input{width:16px; height:16px} .check input{width:16px; height:16px}
.btn.danger{border-color:#e08b84; color:#c0392b} .btn.danger{border-color:#e08b84; color:#c0392b}
.btn.danger:hover{background:#fdecea} .btn.danger:hover{background:#fdecea}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px} /* ⚠️ 这里**不要**再写 .filters{display:flex; flex-wrap:wrap} ——
.filters input[type=text]{flex:1 1 220px; min-width:180px} * 上面「筛选区」那段已经定死为纵向两行布局,
.filters select{max-width:160px} * 这里再写横向会把分类和表单挤回同一行(用户明确不要这样)。
* 只保留对内部控件的宽度约束。 */
.filters .filter-row input[type=text],
.filters .filter-row input[type=search]{flex:1 1 220px; min-width:180px}
.filters .filter-row select{max-width:170px}
@media (max-width:640px){ @media (max-width:640px){
.grid2{grid-template-columns:1fr} .grid2{grid-template-columns:1fr}
.filters input[type=text],.filters select{width:100%; max-width:none} .filters .filter-row input[type=text],
.filters .filter-row input[type=search],
.filters .filter-row select{width:100%; max-width:none}
} }
+1 -1
View File
@@ -8,7 +8,7 @@ if (!defined('FB_ROOT')) {
define('FB_ROOT', dirname(__DIR__)); define('FB_ROOT', dirname(__DIR__));
// 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1, // 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1,
// 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。 // 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 52); } if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 53); }
} }
/* ------------------------------------------------------------------ /* ------------------------------------------------------------------