Layui布局容器和栅格系统

最新推荐文章于 2025-04-10 14:32:48 发布

扫地鼠Gordon

最新推荐文章于 2025-04-10 14:32:48 发布

阅读量1.7k

点赞数 1

分类专栏： Layui

本文链接：https://blog.youkuaiyun.com/qq_28137309/article/details/112879622

版权

本文介绍了Layui的布局容器，包括固定宽度和完整宽度两种类型，以及栅格系统的列间距、列偏移和栅格嵌套功能，帮助理解如何构建响应式页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

布局容器

1.固定宽度（两侧有留白效果）

<div class="layui-container">
  <div class="layui-row">
    固定宽度……
  </div>
</div>

2.完整宽度（占据屏幕宽度的100%）

<div class="layui-fluid">
  完整宽度……
</div>

栅格系统

<!-- 
    栅格系统
        1、定义行 .layui-row
        2、定义列 .layui-col-md*
            md 表示不同屏幕的标识（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&