我的离子内容与 Ionic 4 中的标题重叠

Question

我正在使用 Ionic 4 应用程序，并且已经安装了 Ionic 4 选项卡主题，并且通过在app.component.html 中添加标题代码使标题通用，但问题是我的标题与标题重叠。

这是我的app.component.html：

<ion-header>
    <ion-toolbar>
    <ion-icon name="more" slot="end"></ion-icon>
    </ion-toolbar>
</ion-header>
<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

这是我的tab1.page.html：

<ion-content>
    <ion-card class="welcome-card">
        <ion-img src="/assets/shapes.svg"></ion-img>
        <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
        </ion-card-content>
    </ion-card>
</ion-content>

我刚刚在 Ionic 4 中安装了新的标签主题，我只做了这些更改。

任何帮助深表感谢。

这是我的StackBlitz

Answer 1

为了避免重叠，ion-content您应该添加一个样式ion-content

<ion-content class="content"></ion-content>

.content{
 margin-top: 50px;
}

您可以尝试上面的方法，或者尝试一下是否有效。

<ion-content padding>

</ion-content>

ion-content为标签添加填充

您可以在此处检查适合您的任何其他解决方案离子含量与标题重叠