0

我正在学习光环框架，但我面临一个问题。我实际上正在使用带有 4 个字段的嵌套布局，但不知何故它只显示了前 2 个字段。谁能帮我展示所有这 4 个字段？

这是我的代码。如您所见，下方有一个评论行 2，该评论两个字段在我的页面上不可见。

零件

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">

    <div class="c-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-section page-header">
                    <h2>General Information</h2>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" size="12">
                <div class="page-main">
                    <lightning:layout>
                        <lightning:layoutItem padding="around-small" size="6">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input name="firstName" label="First Name" />
                            </div>
                        </lightning:layoutItem>
                        <lightning:layoutItem padding="around-small" size="6">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input name="lastName" label="Last Name" required="true" />
                            </div>
                        </lightning:layoutItem>


                            <!-- This row 2 is not visible -->
        
                            <lightning:layoutItem padding="around-small" size="6">
                                <div class="slds-p-around_medium lgc-bg">
                                    <lightning:input type="email" name="email1" value="abc@domain.com" label="Email" required="true" />
                                </div>
                            </lightning:layoutItem> 
                            <lightning:layoutItem padding="around-small" size="6">
                                <div class="slds-p-around_medium lgc-bg">
                                    <lightning:input type="tel" label="Phone" name="phone" required="true" />
                                </div>
                            </lightning:layoutItem>     
                    </lightning:layout>
                </div>
            </lightning:layoutItem>

            <lightning:layoutItem flexibility="auto" padding="around-small" size="12">
                <div class="page-footer page-section">
                    <h2>Footer</h2>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>

</aura:component>

CSS

.THIS.c-container {
    border: 1px solid #d8dde6;
    margin: 10px 0 20px 0;
}
.THIS .page-section {
    border: solid 1px #ccc;
    padding: 1rem;
}
.THIS .page-header,
.THIS .page-footer {
    height: 50px;
}
.THIS .page-main {
    background: #f8f8f8;
}
.THIS .page-left,
.THIS .page-right {
    background: #f0efef;
}
4

1 回答 1

0

我们根据网格引用 Lightning:layoutItem 中的大小。网格中最多可以有 12 列，因此我们会相应地选择大小。请用您的代码替换此代码-

<lightning:layout>
                    <lightning:layoutItem padding="around-small" size="3">
                        <div class="slds-p-around_medium lgc-bg">
                            <lightning:input name="firstName" label="First Name" />
                        </div>
                    </lightning:layoutItem>
                    <lightning:layoutItem padding="around-small" size="3">
                        <div class="slds-p-around_medium lgc-bg">
                            <lightning:input name="lastName" label="Last Name" required="true" />
                        </div>
                    </lightning:layoutItem>


                        <!-- This row 2 is not visible -->
    
                        <lightning:layoutItem padding="around-small" size="3">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input type="email" name="email1" value="abc@domain.com" label="Email" required="true" />
                            </div>
                        </lightning:layoutItem> 
                        <lightning:layoutItem padding="around-small" size="3">
                            <div class="slds-p-around_medium lgc-bg">
                                <lightning:input type="tel" label="Phone" name="phone" required="true" />
                            </div>
                        </lightning:layoutItem>     
                </lightning:layout>

请访问以下链接以了解有关 Aura 中的 Grid 的更多信息。

https://www.lightningdesignsystem.com/utilities/grid/

谢谢

于 2021-10-18T06:43:58.817 回答