layui4

页面元素

布局

布局容器

固定宽度

将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。 布局

<div class="layui-container">
  <div class="layui-row">
    ……
  </div>
</div>

完整宽度

能够不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应

<div class="layui-fluid">
  ……
</div>

栅格系统

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

栅格布局规则

1. 采用 layui-row 来定义行，如：

   <div class="layui-row"></div>

2. 采用相似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：

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

3. 列能够同时出现最多四种不一样的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。

4. 可对列追加相似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

5. 能够在列（column）元素中放入你本身的任意元素填充内容

示例：

<h3>常规布局（以中型屏幕桌面为例）：</h3>
<div class="layui-row">
    <div class="layui-col-md9" style="">
      你的内容 9/12
    </div>
    <div class="layui-col-md3" style="">
      你的内容 3/12
    </div>
</div>