Vuetify应用布局中容器无法占满宽度的问题解决

云上老周

2026-7-4

Vuetify布局问题解决：主内容占满宽度、左对齐及默认背景色设置

修改后的完整代码

<template>
  <v-app>
    <!-- Header -->
    <v-app-bar app color="primary">
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>My Vuetify App</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text>Home</v-btn>
      <v-btn text>About</v-btn>
      <v-btn text>Contact</v-btn>
    </v-app-bar>

    <!-- Main Content -->
    <v-main class="bg-surface">
      <v-container fluid class="pa-0">
        Hello World!
      </v-container>
    </v-main>
  </v-app>
</template>

关键调整说明

移除最外层<v-container>：这个容器自带水平内边距，是主内容无法占满宽度的核心原因。<v-app-bar>的app属性已经能让它自动撑满屏幕宽度，不需要额外容器包裹。
设置默认主题背景色：给<v-main>添加bg-surface类（适配Vuetify 3版本），对应默认主题的背景样式；如果是Vuetify 2版本，替换为bg-light即可。
实现内容左对齐+占满宽度：给内部<v-container>添加pa-0类移除默认内边距，配合fluid属性确保容器占满可用宽度，文本自然左对齐到屏幕边缘。