在 Vuetify 中删除边距和填充 [英] Removing Margins and Padding within Vuetify

问题描述

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

So I'm pretty much brand new to Vuetify and Front End development, so sorry if my question is either simple or maybe even too vague.

我正在尝试使用 Nuxt 和 Vuetify 构建一个网站，但是我在移除页面边缘周围的填充时遇到了问题.我试过在 Vuetify 中使用不同的组件，例如流体，我试过查找和更改容器 css 代码(我什至不相信我真的找到了)，我已经尝试了我在上面找到的任何东西Stack Overflow 或在 Vuetify github 上，但对我没有任何作用.

I'm trying to build a website with Nuxt and Vuetify, but I'm having an issue with removing the padding around the edges of the pages. I've tried using different components within Vuetify such as fluid, I've tried finding and altering the container css code (which I'm not even convinced I've actually found), I've tried just about anything I have found on Stack Overflow or on the Vuetify github, but nothing is working for me.

有没有人对如何真正让容器占据整个页面而不是在侧面留下边距和填充有一些建议?在过去的 2 天里，我至少花了 5 个小时试图解决这个问题.这是我目前拥有的.

Does anyone have some advice on how to actually go about having the container take up the whole page instead of leaving margins and padding on the side? I've spent at least 5 hours over the past 2 days trying to figure this out. This is what I currently have.

推荐答案

use spacing帮手:

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

class="ma-0" removes margins
class="pa-0" removes padding
class="ma-0 pa-0" removes both

请注意，这些也是道具，但仅适用于某些(网格)组件，例如:
<v-text-field class="pa-0"></v-text-field> 会起作用，
并且 将不起作用.

Note that these are also props but only for some (grid) components so for example:
<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.

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

If in some components you can't remove spacing with these classes, then you need to target relevant elements with CSS.

这篇关于在 Vuetify 中删除边距和填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！