layui-layout-admin套壳是实现左右分栏的唯一正确方式，必须包含layui-header（可选）、layui-side、layui-body三个直接子元素，缺一不可；栅格系统仅适用于layui-body内部排版，不可用于替代侧边栏机制；折叠需lay-shrink属性配合element.init()及事件监听，移动端适配由框架内置逻辑控制。
用 layui-layout-admin 套壳是最省事的起点
layui 没有“左右分栏组件”这个独立概念，它的左右结构是通过 layui-layout-admin 这个顶层容器约定死的语义结构实现的。你不能靠 flex 或 grid 自由写两个 div 就叫“layui 分栏”，必须套进它的布局骨架里，否则后续的折叠、响应式、主题适配都会失效。
正确结构必须包含：layui-header（可选）、layui-side（左栏）、layui-body（右栏）。三者缺一不可，且必须是 layui-layout-admin 的直接子元素。
-
layui-side默认固定宽度（200px），支持lay-shrink="true"实现折叠 -
layui-body会自动避开左侧，留出安全间距，不需手动设margin-left - 如果漏掉
layui-layout-admin外层容器，layui-side会塌陷成普通块级元素，失去定位和折叠能力
layui-col-* 栅格类在左右分栏里基本用不上
很多人想用 layui-col-md6 把页面切成左右两半——这在 layui-layout-admin 结构里是无效甚至冲突的。栅格系统（layui-row/layui-col-*）设计初衷是用于 layui-body 内部的内容区域排版，不是用来替代侧边栏机制的。
强行混用会出现：左侧菜单被栅格挤变形、折叠按钮失灵、小屏下左右内容重叠等现象。
- 需要在右侧主内容区做响应式网格？可以，在
layui-body里放心用layui-row和layui-col-sm6等 - 想让“左栏占 1/4、右栏占 3/4”？别改栅格，改
layui-side的widthCSS 或用lay-shrink+ 自定义 class 控制折叠态宽度 -
layui-col-xs12在小屏堆叠？那只是针对layui-body内部子模块，不影响layui-side是否显示
折叠功能依赖 lay-shrink 和 JS 初始化
仅加 lay-shrink="true" 属性不会自动生效，必须调用 element.init() 或确保 layui.use('element') 已加载。这是最常被忽略的一步——HTML 写对了，JS 没 init，菜单就折不动。
折叠后，layui-side 宽度变为 60px（图标模式），但 layui-body 不会自动重流，需配合 element.on('collapse(side)', callback) 手动调整右侧 padding 或触发重绘。
- 监听折叠事件：
element.on('collapse(side)', function(data){ console.log(data.show); }); - 折叠时若右侧文字被遮挡，给
layui-body加transition: padding .2s更平滑 - 不要用
display: none隐藏layui-side，这会导致 element 组件丢失状态，应使用lay-shrink控制
移动端适配不是靠媒体查询写死，而是靠 layui-layout-admin 内置逻辑
layui 的移动适配不是让你自己写 @media (max-width: 768px) 去 hide left，它在 layui-layout-admin 中已内置响应式行为：小屏下 layui-side 默认隐藏，顶部出现汉堡菜单，点击后以抽屉形式弹出。
这个行为由框架 JS 控制，你只需确保没覆盖 .layui-layout-admin .layui-side 的 display 规则，且没禁用 mobile 相关模块。
- 检查是否误删了
layui.css里的@media screen and (max-width: 768px)区块（尤其自定义主题时） - 若想强制小屏也显示侧栏，不推荐；如真需，应在
element.init()后用 JS 强行$('.layui-side').show()，并手动处理抽屉逻辑 - 所有响应式切换都基于
window.innerWidth，不是 UA 判断，所以平板横竖屏切换也会触发
真正难的不是写结构，而是理解 layui 的“布局即组件”思维：左右分栏不是样式问题，是容器语义 + JS 行为 + CSS 主题三者绑定的结果。漏掉任意一环，看着像，用着卡。
