layui框架中布局元素

页面元素–布局

栅格系统与后台布局

在 layui 2.0 的版本中，我们加入了强劲的栅格系统和后台布局方案，layui 的栅格系统采用业界比较常见的 12 等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui 终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。

栅格系统
为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

一、栅格布局规则：

1.	采用 layui-row 来定义行
2.	采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。
3.	列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.	可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移
5.	最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

其中：

• 变量md 代表的是不同屏幕下的标记
• 变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
• 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

示例：
<nav class="layui-container">
     <!--常规布局（以中型屏幕桌面为例）   -->
        <div class="layui-row">
                              <!--手机     |   平板     |     桌面    |     大型屏幕-->
            <div class=" layui-col-xs2 layui-sm-md2 layui-md-xs2 layui-lg-md2"></div>
            <div class=" layui-col-xs2 layui-sm-md2 layui-md-xs2 layui-lg-md2">