在Vuetify中删除边距和填充

Question

所以我对Vuetify和Front End开发都很陌生,如果我的问题既简单也可能太模糊,那就很抱歉.

我正在尝试使用Nuxt和Vuetify构建一个网站,但是我在删除页面边缘的填充方面遇到了问题.我尝试过在Vuetify中使用不同的组件,比如流体,我试过找到并改变容器css代码(我甚至不相信我已经找到了),我已经尝试过任何我发现的东西Stack Overflow或Vuetify github,但没有什么对我有用.

有没有人有一些关于如何实际让容器占用整个页面而不是留下边距和填充的建议？在过去的两天里,我花了至少5个小时试图解决这个问题.这就是我现在拥有的.

Answer 1

使用间距助手:

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 的正确位置。