如何在 vuetify 中删除容器边距？答案

【问题标题】：How to remove container margin in vuetify?如何在 vuetify 中删除容器边距？
【发布时间】：2025-12-28 08:05:11
【问题描述】：

我想从v-container 中删除左右边距，所以我添加了pa-0 类。

我还需要在每个元素之间留一个空格，所以我使用grid-list-sm。

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm class="pa-0">
      <v-layout row wrap>
        <v-flex v-for="i in 6" :key="i" xs4>
          <img :src="`https://randomuser.me/api/portraits/men/${i + 20}.jpg`" class="image" alt="lorem" width="100%" height="100%">
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

问题是grid-list-sm 正在将<v-layout row wrap> 中的大小减小到4px，因为边距-2px。并使 v-layout 比他的父级更宽。

我不想使用overflow-x:hidden。我只想让元素正确对齐。

那么，我该如何解决这个问题呢？（没有解决方法）

【问题讨论】：

*.com/questions/53355605/…
没有。请阅读我的问题。
您说要删除边距，但使用“pa-0”表示填充。提供codepen？
但是当我像您提供的链接一样使用 pa-0 类时，grid-list-sm 会使 v-layout 宽度变宽，就像我在问题中解释的那样。

标签： css vue.js vuetify.js

【解决方案1】：

你可以覆盖你正在使用的类中的属性，如下，在你的类的css文件中覆盖，也可以用代码制作一个css文件，包含在你需要的每个类中它

.row{
     margin-right: 0px
}

【讨论】：