在 Vuetify 中删除边距和填充

Question

所以我对 Vuetify 和前端开发几乎是全新的，如果我的问题很简单或者甚至过于模糊，我深表歉意。

我正在尝试使用 Nuxt 和 Vuetify 构建一个网站，但我在删除页面边缘周围的填充时遇到了问题。我试过在 Vuetify 中使用不同的组件，例如 fluid，我试过查找和更改容器 css 代码（我什至不相信我真的找到了），我几乎尝试过任何东西我在 Stack Overflow 或 Vuetify github 上找到了，但对我没有任何帮助。

有没有人对如何让容器占据整个页面而不是在边上留边距和填充有一些建议？在过去的 2 天里，我至少花了 5 个小时来解决这个问题。 This is what I currently have.

Answer 1

好的，所以我能够弄清楚我做错了什么。

这里

<template>
<v-app light>

    <v-toolbar fixed app :clipped-left="clipped" color="deep-orange accent-3">
        <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>

        <v-toolbar-title v-text="title"></v-toolbar-title>
        <v-spacer></v-spacer>
    </v-toolbar>


    <v-content>
        <v-container >
            <nuxt/>
        </v-container>
    </v-content>


    <v-footer :fixed="fixed" app>

    </v-footer>
</v-app>

因此，在我的源代码中，所有内容都在 "default.vue" 页面中进行了布局，即此处。我试图改变实际页面中的样式，就像 index.vue 中那样。当我仔细查看 default.vue 时，我看到了 v-container，这是我之前没有注意到的（就像我说的，完全是新手，所以这对我来说都是全新的）。我能够添加

<style>
.container{
     max-width: 100vw;
     padding:0px;
  }
</style>

到 default.vue，它纠正了我正在处理的问题。它真的归结为理解我正在使用的模板，并找到覆盖 CSS.

的正确位置

Answer 2

他们也有预定义的间距助手，即 pa-0。 https://vuetifyjs.com/en/layout/spacing

Answer 3

使用spacing helpers：

class="ma-0" 删除边距
class="pa-0" 删除填充
class="ma-0 pa-0" 删除两个

请注意，这些也是道具，但仅适用于某些（网格）组件，例如：
<v-text-field class="pa-0"></v-text-field> 会起作用，
<v-text-field pa-0></v-text-field> 将不起作用。

如果在某些组件中您无法使用这些类删除间距，那么您需要使用 CSS 来定位相关元素。

在 Vuetify 中删除边距和填充

Removing Margins and Padding within Vuetify

vuetify.js