vue.js - 在容器中放置 v-app-bar 内容有问题吗？

Question

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

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

标签： vue.jsnuxt.jsvuetify.js

Answer 1

我让我的工作，并将导航栏背景延伸到屏幕边缘。您可以在应用栏内放置一个容器，但它会与项目的 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>