Nativescript 边距 CSS 被忽略

Question

我将 NativeScript 与 Angular 一起使用，并在 ScrollView 中包含以下 FlexboxLayout。我创建了一些像 margin-bottom-five 这样的 css 类来为某些元素添加边距。不过，这个边距在 ScrollView 中被完全忽略了。

我认为是 ScrollView 导致了此行为，因为在另一个带有 FlexboxLayout 但没有 ScrollView 的模板中，边距效果很好。如何让它使用我在 ScrollView 中指定的边距？

<ActionBar class="action-bar">
    <NavigationButton (tap)="router.back()" android.systemIcon="ic_menu_back"></NavigationButton>
    <Label class="action-bar-title" text="Report"></Label>
</ActionBar>

<ScrollView orientation="vertical" class="page">
    <FlexboxLayout flexDirection="column" justifyContent="center" alignItems="center">
        <Label class="text-label margin-bottom-five" textWrap="true">
            <FormattedString>
                <Span text="Testing"></Span>
            </FormattedString>
        </Label>
        <GridLayout *ngFor="let item of items" columns="*,auto,auto,auto,*" rows="auto">
            <Label class="text-label lbl-size" text="{{item.name}}" col="1" textAlignment="center"></Label>
            <Label class="text-label lbl-x-size" text="x" col="2" textAlignment="center"></Label>
            <Label class="text-label lbl-size" text="{{item.date}}" col="3" textAlignment="center"></Label>
        </GridLayout>

        <Button text="Start Over" (tap)="startOver()" class="btn btn-start-over btn-primary">
        </Button>
    </FlexboxLayout>
</ScrollView>

Css:

.margin-bottom-five{
  margin-bottom: 5%;
}

Answer 1

我认为百分比在这里不起作用，请尝试将其更改为

.margin-bottom-five{ margin-bottom: 5; }

Nativescript 边距 CSS 被忽略

Nativescript margin CSS being ignored

nativescript

angular2-nativescript

nativescript-angular