如何在一行简单形式 SAPUI5 中有 4 列

Question

我需要对齐 <form:SimpleForm> 中的列。我需要连续 4 列，但只有 2 列对齐。这是我的例子，请参考JsBin

需要输出：

标签输入字段标签输入字段

当前输出：

标签输入字段

Answer 1

要使用右侧的新容器，只需设置一个空标题即可。

但请注意，制表符不是从左到右、从上到下，而是（每个容器）从上到下、从左到右毕竟，它只是一个 SimpleForm ;-)

查看此工作示例（请运行示例full-page，否则它仍会显示字段top-town，因为响应性质）：

sap.ui.controller("view1.initial", {
    onInit : function() { }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:l="sap.ui.layout"
      xmlns:f="sap.ui.layout.form"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
        <f:SimpleForm
            maxContainerCols="2"
            editable="true"
            layout="ResponsiveGridLayout"
                labelSpanL="4"
                labelSpanM="4"
                emptySpanL="0"
                emptySpanM="0"
                columnsL="2"
                columnsM="2">
            <f:content>
                <core:Title text="A Title" />
                <Label text="1st label" required="true" />
                <Input value="Blah" />

                <core:Title text="" /> <!-- empty title so it looks like this container belongs to the left one -->
                <Label text="2nd label" required="true" />
                <Input value="Blah" />
            </f:content>
        </f:SimpleForm>
    </mvc:View>
</script>

如何在一行简单形式 SAPUI5 中有 4 列

how to have 4 columns in a row simpleform SAPUI5

css

sapui5

sap-fiori