Jumbotron无法在视图中正确对齐

Question

我有一个Vuetify工具栏（称为“首页导航”），该工具栏透明地位于Jumbotron图像（“ home-jumbotron”）上。

当我在App.vue中执行此操作时，工具栏和Jumbotron会正确对齐：

<template>
    <v-app>
    <home-navigation/>
    <home-jumbotron/>
    <v-content transition="slide-x-transition">
            <router-view></router-view>
        </v-content>
    </v-app>
</template>

但是，当我将导航和巨型导航器从App.Vue移到他们自己的视图MyView.vue中时，它看起来如下：

<template>
    <span>
    <home-navigation/>
    <home-jumbotron/>
    </span>
</template>

然后，导航和巨型波宝不再正确对齐。而是工具栏似乎位于超大屏幕上方，而不是坐在其上方。

我想知道为什么会这样，如何在保持导航和超大屏幕视野的同时保持正确的外观？