这篇博客详细介绍了layui的页面布局和栅格系统，包括常规布局、响应式规则、列间距和列偏移。layui提供了一套12等分的栅格系统，支持在不同屏幕尺寸下灵活布局，通过layui-col-md*等预设类实现列的宽度和偏移。还介绍了列嵌套，允许无限层次的嵌套以满足复杂布局需求。
Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待
4999元包邮
去购买 >
页面元素
布局
布局容器
固定宽度
将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
……
完整宽度
可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应
……
栅格系统
为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 引进了一套具备响应式能力的栅格系统。将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格布局规则
采用 layui-row 来定义行，如：
采用类似 layui-col-md* 这样的预设类来定义一组列(column)，且放在行(row)内。其中：
变量 md 代表的是不同屏幕下的标记
变量 * 代表的是该列所占用的12等分数(如6/12)，可选值为 1 - 12
最低0.47元/天 解锁文章
1756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
