layui响应式布局怎样铺满整合屏幕

1、第一步：创建一个简单页面，并引入layui.js和layui.css，如图盯腊吐：

2、第二步：进行格栅布局，在layui里面，只需要用class="layui-row"就行，代码如下：

<div class="layui-container">

   <div class="layui-row">
       <荡歌div class="layui-col-xs6">
           <div class="grid-demo grid-demo-bg1">6/12</div>
       </div>
       <div class="layui-col-xs6">
           <div class="grid-demo">6/12</div>
       </div>
   </div>
</div>

3、第三步：运行上面的代码，可以看到屏幕平分了指定区域的一半，如图：

4、第四步：layui移动设备、桌面端的组合响应式展现，代码如下：

<div class="layui-row">

   <div class="layui-col-xs12 layui-col-md8">
       <div class="grid-demo grid-demo-bg1">移动：12/12、桌面：8/12</div>
   </div>
   <div class="layui-col-xs6 layui-col-md4">
       <div class="grid-demo">移动：6/12、桌面：4/12</div>
   </div>
   <div class="layui-col-xs6 layui-col-md12">
       <div class="grid-demo grid-demo-bg2">移动：6/12、桌面：12/12</div>
   </div>
</div>

5、第五步：在浏览器上开始运行上面代码，可以看到效果如下缝肥：

6、第六步：想要是充满整个屏幕的代码如下：

<div class="layui-row">

   <div class="layui-col-xs12">
       <div class="grid-demo grid-demo-bg1">12</div>
   </div>
</div>

7、第七步：运行上面的代码，可以看到真的铺满了整个屏幕，如图：

8、第八步：layui布局用的格栅系统(grid)