admin 发表于 2018-6-18 17:20:43

layUi 与 bootstrap 的响应式 栅格系统等同

在 LayUi 中 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
<div class="layui-container">
常规布局（以中型屏幕桌面为例）：
<div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
</div>
   
移动设备、平板、桌面端的不同表现：
<div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
</div>
</div>

admin 发表于 2018-6-18 17:22:15

layui-show-*-block        定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
layui-show-*-inline        定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block        定义不同设备下的 display: inline-block; * 可选值同上
layui-hide-*        定义不同设备下的隐藏类，即： display: none; * 可选值同上
隐藏与显示

admin 发表于 2018-6-18 17:23:23

栅格系统的容器
<div class="layui-container">
<div class="layui-row">
    ……
</div>
</div>      

下一个为100% 宽 与boot等同
<div class="layui-fluid">
……
</div>      

admin 发表于 2018-6-18 17:25:06

列间距(最左侧不会有间距 )
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
    1/3
</div>
<div class="layui-col-md4">
    1/3
</div>
<div class="layui-col-md4">
    1/3
</div>
</div>
此间距为10

admin 发表于 2018-6-18 17:27:04

嵌套注意： 在嵌套时 与boot 等同 在 layui-row 下嵌套而不是 在上一级的容器下嵌套
页: [1]
查看完整版本: layUi 与 bootstrap 的响应式 栅格系统等同