如何在MongoDB Web UI中调整界面以显示更多集合数据？

问题说明 #

• MongoDB自带的Web UI在选定目标数据库、对应集合查看存储数据时，可用的数据展示窗口面积极小
• 就目前版本的默认配置来看，页面其余功能板块没有提供原生最小化入口，从实际界面来看，仅不到2%的屏幕空间用于数据展示，剩下98%的空间都被导航栏、操作按钮等非核心内容占据，和用户打开页面查看数据的核心诉求完全不符，严重影响数据浏览效率
• 问题界面参考：
  

可行解决方法 #

临时单次查数据：用浏览器开发者工具直接改样式 #

不需要改动服务端任何配置，操作步骤非常简单：

1. 打开对应集合的数据查看页面，按F12唤起浏览器开发者工具
2. 用元素选择工具点选左侧导航栏、顶部冗余操作栏等不需要的功能板块，给对应DOM节点添加行内样式display: none !important直接隐藏
3. 选中数据展示区域的外层容器，修改宽高样式为width: 100% !important; height: 95vh !important，就能让数据区域铺满几乎整个屏幕

这个方法只对当前打开的页面生效，刷新页面后就会恢复默认布局，适合临时查一两次数据的场景

长期高频使用：装用户脚本自动适配布局 #

如果需要经常访问这个Web UI，可以安装Tampermonkey/暴力猴这类用户脚本管理器，写入自定义的样式适配规则，每次访问页面的时候自动调整布局，参考脚本逻辑如下：

// ==UserScript==
// @name         MongoDB UI数据区全屏适配
// @match        替换为你实际访问MongoDB Web UI的地址匹配规则
// @grant        GM_addStyle
// ==/UserScript==
GM_addStyle(`
/* 隐藏冗余的侧边导航、顶部操作栏 */
.legacy-sidebar, .global-nav { display: none !important; }
/* 让数据展示区域撑满整个浏览器视口 */
.document-list-wrapper {
    width: 100vw !important;
    max-width: 100% !important;
    height: calc(100vh - 48px) !important;
    margin: 0 !important;
}
`)

注意：不同版本的MongoDB Web UI前端类名可能存在差异，实际使用的时候按F12核对下对应节点的类名替换就行

体验最好的方案：换用桌面客户端连接 #

如果没有必须使用Web UI的限制，直接用桌面端MongoDB可视化工具连接数据库实例就行，完全不存在Web UI布局不合理的问题，常用的可选工具：

• MongoDB Compass：官方推出的免费桌面客户端，适配性最好
• Navicat for MongoDB：新手友好，操作逻辑符合多数国内用户习惯
• Studio 3T：功能最全，适合有大量数据操作、聚合分析需求的用户

内容的提问来源于stack exchange，提问作者Ray Kiddy