Layui快速入门之第二节布局容器(固定宽度与完整宽度)

左手的ㄟ右手 2024-03-08 08:26 154阅读 0赞

目录

一:固定宽度

二: 完整宽度


一:固定宽度

将栅格放入一个带有 class="layui-container" 的特定容器中,以便在小屏幕以上的设备中固定宽度,让列可控(两侧有留白效果)

  1. <!--固定宽度(两侧有留白效果)-->
  2. <div className="layui-container" style="background-color:navajowhite;height: 300px">
  3. 固定宽度
  4. </div>

测试效果:

e20590a18c304f19826a33410e0d8cbe.jpeg

二: 完整宽度

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

  1. <!--完整宽度(占据屏幕的100%)-->
  2. <div class="layui-fluid" style="background-color:yellow;height: 300px">
  3. 完整宽度
  4. </div>

测试效果:

88996a05a12143eb8a1670d7b65bb30e.jpeg

发表评论

表情:
评论列表 (有 0 条评论,154人围观)

还没有评论,来说两句吧...

相关阅读