在 Vuetify 中删除边距和填充

Question

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

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

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

Answer 1

使用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 定位相关元素。

Answer 2

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

这里

<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 3

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