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

本文介绍了Layui框架中的布局容器使用,包括如何创建固定宽度的栅格系统,以实现小屏幕以上设备的两侧留白效果,以及如何设置完整宽度的容器,让内容100%适应屏幕宽度。
摘要由CSDN通过智能技术生成

目录

一:固定宽度

二: 完整宽度


一:固定宽度

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

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

测试效果:

二: 完整宽度

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

 <!--完整宽度(占据屏幕的100%)-->
      <div class="layui-fluid" style="background-color:yellow;hei
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值