Problem with placing v-app-bar content in container?

问题

I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.

I marked with red box on screenshot where content should be.

回答1:

Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.

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

My solution looks like so:

The colors show the nav bar width adjusted to match the body. The code looks like so:

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

来源：https://stackoverflow.com/questions/64685095/problem-with-placing-v-app-bar-content-in-container