使用Label，Inputfield和Checkbox进行布局

Question

样机

当前代码

<mvc:View
  xmlns="sap.m"
  xmlns:core="sap.ui.core"
  xmlns:l="sap.ui.layout"
  xmlns:f="sap.ui.layout.form"
  displayBlock="true" height="100%">
  <Page showHeader="false" id="page">
    <content>
      <l:Grid defaultSpan="L12 M12 S12" width="auto">
        <l:content>
          <f:Form editable="true">
            <f:title>
              <core:Title text="Test" />
            </f:title>
            <f:layout>
              <f:ResponsiveGridLayout
                labelSpanL="3"
                labelSpanM="3"
                emptySpanL="4"
                emptySpanM="4"
                columnsL="1"
                columnsM="1"
              />
            </f:layout>
            <f:formContainers>
              <f:FormContainer>
                <f:formElements>
                  <f:FormElement label="Name">
                    <f:fields>
                      <Input id="name1" value="" />
                    </f:fields>
                  </f:FormElement>
                  <f:FormElement label="Name">
                    <f:fields>
                      <Input id="name2" value="" />
                    </f:fields>
                  </f:FormElement>
                  <f:FormElement>
                    <f:fields>
                      <CheckBox id="cb1" />
                      <Text wrapping="true" text="lorem ipsum" />
                    </f:fields>
                  </f:FormElement>
                </f:formElements>
              </f:FormContainer>
            </f:formContainers>
          </f:Form>
        </l:content>
      </l:Grid>
    </content>
  </Page>
</mvc:View>

问题

复选框未居中。当前代码具有响应性，解决方案也应具有响应性。

Answer 1

如果您希望复选框居中，则需要在formElement上使用标签，就像使用其他标签一样。如果你不想要一个标签，你可能需要一些css来在该特定的FormElement上留下左边距。

还有另外一种方式更多＆＃34;礼貌＆＃34;要做到这一点，但如果它存在我不知道，将继续查看该帖子，看看是否有人提供了更好的解决方案。

但是现在，我希望这对你有用。