Sapui5 如何使简单表单具有响应性？

我制作了一个简单的表格，定义如下：

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core">
    <VBox class="sapUiSmallMargin">
        <f:SimpleForm id="SimpleFormChange480_12120"
                editable="true"
                layout="ResponsiveGridLayout"
                title="Add New Employee"
                labelSpanL="4"
                labelSpanM="4"
                labelSpanS="12"
                adjustLabelSpan="false"
                emptySpanL="0"
                emptySpanM="0"
                emptySpanS="0"
                columnsL="1"
                columnsM="1"
                columnsS="1"
                singleContainerFullSize="false" >
            <f:content>
                <Label text="Employee Id">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="empid">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Employee Name">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="empname">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Email">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="email">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Department">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="department">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="City">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="city">
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="State">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="state" >
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="District">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="district" >
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
                <Label text="Address">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="address" >
                    <layoutData>
                        <l:GridData span="L2 M4 S12"/>
                    </layoutData>
                </Input>
            </f:content>
        </f:SimpleForm>
    </VBox>
</core:FragmentDefinition>

我想我在定义

span

时犯了任何错误。我对大型、中型和小型系统没有太多的想法，我认为我面临的主要问题是这个问题

当我在iPad设备中检查响应时，它没有显示准确的响应，但我尝试了这种方法，任何人都可以帮助我使其响应。

根据您的要求（iPad），表单没有显示3列。您需要调整

span

值

<VBox class="sapUiSmallMargin">
    <f:SimpleForm id="SimpleFormChange480_12120"
        editable="true"
        layout="ResponsiveGridLayout"
        title="Add New Employee"
        labelSpanL="4"
        labelSpanM="4"
        labelSpanS="12"
        adjustLabelSpan="false"
        emptySpanL="0"
        emptySpanM="0"
        emptySpanS="0"
        columnsL="1"
        columnsM="1"
        columnsS="1"
        singleContainerFullSize="false" >
        <f:content>
            <Label text="Employee Id">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="empid">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Employee Name">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="empname">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Email">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="email">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Department">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="department">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="City">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="city">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="State">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="state" >
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="District">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="district" >
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <Label text="Address">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Label>
            <Input id="address" >
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData>
            </Input>
            <!-- Select -->
            <Label text="Branch">
                <layoutData>
                    <l:GridData span="L2 M2 S12"/>
                </layoutData> 
            </Label>
            <Select> 
                <layoutData> 
                    <l:GridData span="L2 M2 S12" /> 
                </layoutData> 
            </Select>
        </f:content>
    </f:SimpleForm>
</VBox>

输出-带有标签span 2和输入span 3的iPad

输出-带标签和输入span 2的iPad

---

您到底想归档什么？我想实现一个包含多个列和3行响应的表单这是否回答了您的问题？我可以知道为什么标签名称会被截断吗。。。。当我们试图实现3列布局时，标签没有太大的宽度，这会导致截短单词，我们可以避免这种情况吗。我们可以做到这一点，但投入的规模将更小。我已经更新了代码，请参考。谢谢yoiu mate我已经尝试过了，我得到了它，但是当我在iphone 5中为输入字段（例如，部门和城市）添加选择框时，它没有响应。我可以知道这背后的原因吗？与上述代码相同，我刚刚添加了选择框