将 v-app-bar 内容放入容器时出现问题？

Question

我需要将内容放置在容器内的 v-app-bar 内，因此它与其他页面内容排成一行。应用程序内的所有内容都应具有每个断点的最大宽度，而不是整个页面宽度。将所有内容放在容器中并不能解决问题。

我在屏幕截图上用红色框标记了应该包含内容的位置。

Answer 1

嘿，我也有同样的问题。我想出了一个粗略的解决办法，我的问题就在这里，以防您也找到答案。

使 vuetify 应用栏项目与 正文内容对齐

我的解决方案如下所示：

颜色显示调整后的导航栏宽度以匹配主体。代码如下所示：

<template>
    <v-sheet color="red">
        <v-container class="pa-0">
            <v-app-bar
                    dense
                    flat
                    color="blue accent-4"
            >
                <v-btn icon>
                    <v-icon>mdi-home-outline</v-icon>
                </v-btn>
                <v-divider inset vertical></v-divider>

                <v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
                <v-spacer></v-spacer>
                <v-btn text v-text="'Sign In'"></v-btn>
                <v-btn text v-text="'Register'"></v-btn>
            </v-app-bar>
        </v-container>
    </v-sheet>
</template>

Answer 2

我让我的工作正常工作，并将导航栏背景延伸到屏幕边缘。您可以在应用程序栏中放置一个容器，但它会与项目的弹性盒混淆，因此您只需在其中放置一个 v 行即可使它们正确对齐。

<template>
  <nav class="toolbar" align="center">
    <v-app-bar app>
      <v-container>
        <v-row align="center">
          <v-app-bar-title>
            <!-- Title-->
          </v-app-bar-title>
          <div>
            <!-- Left side content -->
          </div>
          <v-spacer />
          <div>
            <!-- Right side content -->
          </div>
        </v-row>
      </v-container>
    </v-app-bar>
  </nav>
</template>

<style scoped>
.v-container {
  max-width: 60% !important;
}
</style>

Answer 3

对于其他只想限制

v-app-bar

内容的人，我在 https://vuetifyjs.com/en/examples/wireframes/constrained/ 找到了一个很好的例子（正如 Ari 在评论中指出的那样）主要问题）：

<template>
  <v-app-bar app>
    <v-container class="pa-0 fill-height">
      <!-- [...] -->
    </v-container>
  </v-app-bar>
</template>

Answer 4

有谁知道这个问题的解决方案，它适用于最新的 vuetify？我尝试了这些问题中建议的所有内容，但我的应用程序栏只保持其全宽。