如何调整phpMyAdmin左侧导航栏宽度-phpMyAdmin-PHP中文网

必须在domcontentloaded后读取localstorage并设css变量，否则宽度复位；应改用setproperty设置--nav-width变量，配合.media查询适配移动端，避免!important和直接style.width。

宽度存不住、拖拽后复位、响应式失效——根本不是 bug，而是 localstorage 读取时机和 css 应用逻辑没对上。必须在 domcontentloaded 后立即读取并设值，不能等 window.load 或靠 css 覆盖。

为什么拖拽调整后宽度立刻复位？

phpMyAdmin 5.x 的左侧导航栏（通常是 .navigation 或 #serverinfo .sidebar）宽度由 JS 控制：拖拽时写入 localStorage.setItem('navWidth', width)，但默认不读、不设、不触发重绘。你看到的“复位”，其实是 DOM 渲染完才去读 localStorage，样式已定型，再改 style.width 会被 flex 布局或 CSS 规则覆盖。

检查浏览器控制台是否报错 Cannot read property 'width' of null——说明 JS 找不到目标容器节点
确认 localStorage 中是否存在 navWidth 键：打开 DevTools → Application → Local Storage → 查看对应域名下是否有该 key
不要直接修改 style.width，它会被后续 CSS（如 flex: 1）强制重置；应改用 CSS 变量 + setProperty()

如何让宽度真正生效且跨页面保持？

核心动作就两步：读 localStorage、设 CSS 变量。关键在时机和方式——必须在 DOMContentLoaded 阶段完成，且避免使用 !important。

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

编辑 js/navigation.js（路径通常为 phpMyAdmin 根目录下的 js/navigation.js），在 $(document).ready(...) 或 document.addEventListener('DOMContentLoaded', ...) 内部开头插入：

const savedWidth = localStorage.getItem('navWidth');
if (savedWidth) {
  document.documentElement.style.setProperty('--nav-width', savedWidth + 'px');
}

在自定义 CSS（如 custom.css 或通过 $cfg['CustomCSS'] 加载）中添加：

.navigation { width: var(--nav-width, 240px); }

移动端需加媒体查询适配：

@media (max-width: 768px) {
  .navigation { width: var(--nav-width, 200px); }
}

为什么用 CSS 变量而不是直接改 style.width？

phpMyAdmin 5.x 多数布局基于 flex，容器父级常设 flex: 1 或 min-width，直接写 element.style.width = '260px' 会被计算样式覆盖；而 setProperty() 更新的是根元素变量，CSS 规则能稳定响应，且支持响应式断点继承。

若你发现宽度仍被覆盖，检查是否有其他 CSS 规则带更高优先级，比如 .navigation { width: 220px !important; } —— 删除所有 !important，靠 specificity 和加载顺序解决
不要在 config.inc.php 里硬编码宽度（如 $cfg['NavigationTreeWidth'] = 260;），这个配置项在 5.x 中已被移除，无效
如果用了第三方主题，确认主题 CSS 是否重写了 .navigation 宽度；优先在主题 CSS 后加载你的 custom.css

最易被忽略的一点：localStorage 读取必须发生在 DOM 构建完成之后、任何 layout 触发之前。哪怕延迟 10ms（比如用 setTimeout(..., 0)），都可能错过首次渲染时机，导致宽度闪动或失效。