layui响应式表单上下结构

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/lib/layui-2.13.5/css/layui.css" media="all">
    <style>
        /* 全局背景与容器 */
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }

        .layui-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        /* 按钮行下方留白 */
        .top-btn-row {
            margin-bottom: 15px;
        }

        /* 带边框的卡片 */
        .bordered-card {
            border: 1px solid #d2d2d2 !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .bordered-card .layui-card-body {
            padding: 20px 20px 10px 20px;
        }

        /* ===== 上下布局核心样式 ===== */
        .vertical-layout .layui-form-item {
            display: flex;
            flex-direction: column;
            /* 纵向排列 */
            margin-bottom: 0;
            /* 间距由 grid 的 gap 控制 */
        }

        /* 标签容器：使用 flex 让 label 可省略，星号紧贴 */
        .vertical-layout .label-container {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 5px;
            /* 与输入框的间距 */
        }

        /* label 本身：可省略，宽度由内容决定，允许收缩 */
        .vertical-layout .layui-form-label {
            float: none;
            width: auto;
            padding: 0;
            /* 去掉内边距，由容器控制 */
            text-align: left;
            display: inline-block;
            /* 确保能正确计算宽度 */
            line-height: normal;
            font-weight: 500;
            /* 文本过长显示省略号 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 不拉伸，但可收缩 */
            flex: 0 1 auto;
            /* 默认值，可不写，明确一下 */
            min-width: 0;
            /* 允许收缩 */
        }

        /* 红色星号：独立且不省略，紧跟在 label 后 */
        .vertical-layout .required-star {
            color: red;
            margin-left: 4px;
            /* font-size: 1.2em; */
            flex-shrink: 0;
            /* 防止被压缩 */
            height: 20px;
        }

        .vertical-layout .layui-input-block {
            margin-left: 0;
            width: 100%;
        }

        /* 输入框、下拉框、文本域宽度自适应 */
        .vertical-layout .layui-input,
        .vertical-layout .layui-select,
        .vertical-layout .layui-textarea {
            width: 100%;
            box-sizing: border-box;
            /* 确保 padding 不影响宽度 */
        }

        /* 复选框、开关等特殊元素保持一行显示 */
        .vertical-layout .layui-input-block .layui-unselect {
            /* margin-right: 10px; */
        }

        /* ===== CSS Grid 布局 ===== */
        .form-grid {
            display: grid;
            gap: 20px;
            /* 行列间距 */
            grid-template-columns: repeat(5, 1fr);
            /* 默认大屏4列 */
        }

        /* 响应式断点 */
        @media screen and (max-width: 1500px) {
            .form-grid {
                grid-template-columns: repeat(4, 1fr);
                /* 中屏3列 */
            }
        }

        @media screen and (max-width: 1200px) {
            .form-grid {
                grid-template-columns: repeat(3, 1fr);
                /* 中屏3列 */
            }
        }

        @media screen and (max-width: 992px) {
            .form-grid {
                grid-template-columns: repeat(2, 1fr);
                /* 小屏2列 */
            }
        }

        @media screen and (max-width: 768px) {
            .form-grid {
                grid-template-columns: repeat(1, 1fr);
                /* 超小屏1列 */
            }
        }

        /* 每个表单项容器：允许内容收缩，避免长文本撑大网格 */
        .grid-item {
            min-width: 0;
            /* 关键：允许网格项收缩到小于内容最小宽度 */
        }
    </style>
</head>

<body>
    <script src="/lib/layui-2.13.5/layui.js" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script src="/lib/axio/axios.min.js"></script>

    <div class=" layui-form" lay-filter="exampleForm">
        <!-- 顶部按钮行：右侧对齐 -->
        <div class="layui-row top-btn-row">
            <div class="layui-col-xs12" style="text-align: right;">
                <button type="button" class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
            </div>
        </div>

        <!-- 表单区域：使用 vertical-layout 实现上下布局，grid 实现固定列数响应式 -->
        <div class="vertical-layout">
            <div class="layui-card bordered-card">
                <div class="layui-card-header">基本信息</div>
                <div class="layui-card-body">
                    <!-- 使用 grid 容器 -->
                    <div class="form-grid">
                        <!-- 姓名（必填）- 使用超长文本演示省略效果，星号紧贴 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">
                                        这是一个非常非常长的姓名标签，用来测试文本溢出省略效果
                                    </label>
                                    <span class="required-star">*</span>
                                </div>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <!-- 性别（非必填） -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">性别</label>
                                    <!-- <span class="required-star">*</span> -->

                                </div>
                                <div class="layui-input-block">
                                    <select name="sex" lay-verify="required">
                                        <option value=""></option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 邮箱（必填） -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">邮箱</label>
                                    <span class="required-star">*</span>
                                </div>
                                <div class="layui-input-block">
                                    <input type="email" name="email" required lay-verify="required|email"
                                        placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <!-- 手机（必填） -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">手机</label>
                                    <span class="required-star">*</span>
                                </div>
                                <div class="layui-input-block">
                                    <input type="tel" name="phone" required lay-verify="required|phone"
                                        placeholder="请输入手机号" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <!-- 出生日期 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">出生日期</label>
                                </div>
                                <div class="layui-input-block">
                                    <input type="text" name="birth" id="birth" placeholder="请选择日期" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                        </div>
                        <!-- 学历 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">学历</label>
                                </div>
                                <div class="layui-input-block">
                                    <select name="education">
                                        <option value=""></option>
                                        <option value="大专">大专</option>
                                        <option value="本科">本科</option>
                                        <option value="硕士">硕士</option>
                                        <option value="博士">博士</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 职业 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">职业</label>
                                </div>
                                <div class="layui-input-block">
                                    <input type="text" name="job" placeholder="请输入职业" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                        </div>
                        <!-- 城市 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">城市</label>
                                </div>
                                <div class="layui-input-block">
                                    <select name="city" lay-search>
                                        <option value="北京">北京</option>
                                        <option value="上海">上海</option>
                                        <option value="广州">广州</option>
                                        <option value="深圳">深圳</option>
                                        <option value="杭州">杭州</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 兴趣爱好 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">兴趣爱好</label>
                                </div>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="hobby[]" value="读书" title="读书">
                                    <input type="checkbox" name="hobby[]" value="运动" title="运动">
                                    <input type="checkbox" name="hobby[]" value="音乐" title="音乐">
                                </div>
                            </div>
                        </div>
                        <!-- 是否在职 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">是否在职</label>
                                </div>
                                <div class="layui-input-block">
                                    <input type="radio" name="isWork" value="是" title="是" checked>
                                    <input type="radio" name="isWork" value="否" title="否">
                                </div>
                            </div>
                        </div>
                        <!-- 个人简介 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">个人简介</label>
                                </div>
                                <div class="layui-input-block">
                                    <textarea name="desc" placeholder="请输入简介" class="layui-textarea"></textarea>
                                </div>
                            </div>
                        </div>
                        <!-- 开关 -->
                        <div class="grid-item">
                            <div class="layui-form-item">
                                <div class="label-container">
                                    <label class="layui-form-label">开关</label>
                                </div>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'laydate'], function () {
            var form = layui.form;
            var laydate = layui.laydate;

            // 日期渲染
            laydate.render({
                elem: '#birth'
            });

            // 监听提交按钮
            form.on('submit(formSubmit)', function (data) {
                console.log(data);
                layer.msg(JSON.stringify(data.field), { icon: 1 });
                return false;
            });

            // 渲染所有表单组件
            form.render();
        });
    </script>
</body>

</html>