Question

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

我正在尝试使用Nuxt和Vuetify建立一个网站，但我在删除页面边缘的填充方面遇到了问题。我尝试过在Vuetify中使用不同的组件，比如流体，我试图找到并改变容器css代码（我甚至不相信我已经找到了），我＆＃39我已经尝试了我在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>

所以，在我的来源中，所有内容都在＆＃34; default.vue＆＃34;页面，在这里。我试图改变实际页面中的样式，就像在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

在Vuetify中删除边距和填充

3 个答案: