layui-fluid//使用此类不会固定宽度,而是 100%自适应 第二,设置行,很简单,只需要在第二个div选择使用layui-row这个类就行了。 第三,设置列,layui-col(列)这个类需要被使用layui-row这个类的div包裹,这样才能设置列的等分值。 最后,将你要写的元素放入列(layui-col),就完成了简单的布局,这样的布局是具有...
1.4、layui-col-space列间距:容器区域内多列内容之间的间距设置 格式: layui-col-space$$为数字,代表每一列内容的间距,从本质上讲:这个间距是加在了每一个layui-col的左右内边距上的像素。 <divclass="layui-container"><divclass="layui-row layui-col-space10"><divclass="layui-col-md4"><divclas...
采用layui-row 来定义行,如: 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内。其中: 变量md 代表的是不同屏幕下的标记(可选值见下文) 变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12 如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,...
layui-col-space3 列之间间隔 3px layui-col-space5 列之间间隔 5px <divclass="layui-row layui-col-space10"><divclass="layui-col-md4">1/3</div><divclass="layui-col-md4">1/3</div><divclass="layui-col-md4">1/3</div></div> 六、列偏移: 对列追加 类似 layui-col-md-offse...
layui-row:表示这是一行 layui-col-xs6:移动设备占比 layui-col-sm6:平板设备占比 layui-col-md6:桌面设备占比 .col-xs-超小屏幕 手机 (<768px),.col-sm-小屏幕 平板 (≥768px),.col-md-中等屏幕 桌面显示器 (≥992px)(栅格参数)
6 第六步：在响应式布局的时候，有时候还需要控制列间隔，代码如下：<div class="layui-row layui-col-space1"> <div class="layui-col-md3"> <div class="grid-demo grid-demo-bg1">1/4</div> </div> <div class="layui-col-md3"> <div class="grid-demo">1/4</div> </d...
layui-container,layui-row,layui-col-md9 layui-container"> 常规布局(以中型屏幕桌面为例): layui-row"> layui-col-md9"> 你的内容 9/12 layui-col-md3"> 你的内容 3/12... 移动设备、平板、...
包含常用的文本框、下拉列表框、单选框、复选框、按钮等表单元素 <divclass="layui-card"><divclass="layui-card-header">响应式组合</div><divclass="layui-card-body"><formclass="layui-form"action=""lay-filter="component-form-element"><divclass="layui-row layui-col-space10 layui-form-item...
<divclass="layui-row layui-col-space1"><divclass="layui-col-md3"><divclass="grid-demo grid-demo-bg1">1/4</div></div><divclass="layui-col-md3"><divclass="grid-demo">1/4</div></div><divclass="layui-col-md3"><divclass="grid-demo grid-demo-bg1">1/4</div></div><...
<divclass="yys-fluid yys-wrapper"><divclass="layui-row lay-col-space20"><divclass="layui-cos-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12"><sectionclass="yys-body animated rotateInDownLeft"><divclass="yys-body-content clearfix changepwd"><divclass="layui-col-lg12 layui...