Vuetify 3中创建无间距v-row问题求助

你的代码存在几个关键问题，导致无法实现全屏无间距效果，修正方案如下：

问题分析 #

• 误用了原生<row>标签，而非Vuetify官方的<v-row>组件，no-gutters属性自然不生效
• 外层的<v-container fluid>自带默认内边距，会限制内容铺满屏幕
• 未清除页面层级的默认边距/内边距

修正后的代码 #

<template>
  <v-main class="pa-0">
    <div class="maple" style="background-color: red; width: 100vw; min-height: 100vh;">
      <v-row no-gutters>
        <v-col class="pa-0">
          <h1>Have a Showmax Festive</h1>
          <div v-for="image in images" :key="image">
            <v-img :src="image"></v-img>
          </div>
        </v-col>
      </v-row>
    </div>
  </v-main>
</template>

<style>
/* 清除全局默认边距，确保完全铺满 */
body {
  margin: 0;
  padding: 0;
}
</style>

关键调整说明 #

• 移除多余的<v-container>，改用<v-main>直接作为主容器，并添加pa-0清除其内边距
• 将<row>替换为<v-row>，保留no-gutters属性消除行内的 gutter 间距
• 给<v-col>添加pa-0清除列的默认内边距
• 通过自定义样式给.maple设置红色背景、全屏宽高，同时清除body的默认边距

内容的提问来源于stack exchange，提问作者RSQL