在容器中放置 v-app-bar 内容有问题吗？答案

【问题标题】：Problem with placing v-app-bar content in container?在容器中放置 v-app-bar 内容有问题吗？
【发布时间】：2021-02-17 10:39:52
【问题描述】：

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

我在屏幕截图上用红框标记了内容应该在哪里。

【问题讨论】：

提供与指定区域相关的代码。还提供您尝试过但失败的代码尝试。是否要将左侧导航栏中的徽标和右侧导航栏中的菜单移动到导航栏中的红色区域？
Vuetify 有一些限制应用栏的例子vuetifyjs.com/en/getting-started/wireframes/#examples

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

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

Make vuetify app bar items align with <v-container> body content

我的解决方案如下所示：

颜色显示已调整以匹配正文的导航栏宽度。代码如下所示：

<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>

【讨论】：

【解决方案2】：

对于只希望限制v-app-bar 内容的其他人，我在https://vuetifyjs.com/en/examples/wireframes/constrained/（如Ari pointed out in the comment for the main question）找到了一个很好的例子：

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

【讨论】：

【解决方案3】：

我让我的工作，并将导航栏背景延伸到屏幕边缘。您可以在 app-bar 中放置一个容器，但它会与项目的 flexbox 混淆，因此您只需在其中放置一个 v-row 以使它们正确对齐。

<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>

【讨论】：