在 Vuetify 中删除边距和填充

Question

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

我正在尝试使用 Nuxt 和 Vuetify 构建一个网站，但在删除页面边缘周围的填充时遇到问题。我尝试过在 Vuetify 中使用不同的组件，例如 Fluid，我尝试过查找和更改容器 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 的正确位置。

Answer 3

要从列中删除填充，您可以向 v-row 添加“no-gutters”属性：

<v-container fluid>
  <v-row no-gutters>
    <v-col>
      <!-- content -->
    </v-col>
  </v-row>
<v-container>

Answer 4

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

Answer 5

处理这些场景的一个好方法是在主 Nuxt 入口点上使用

fluid

v-container，如下所示（默认布局）：

<template>
  <v-app>
    <v-main>
      <v-container fluid>
        <Nuxt /> <!-- Nuxt's entry point -->
      </v-container>
    </v-main>
  </v-app>
</template>

现在，每次需要全角部分时，请将容器的

v-col

填充设置为零（最好是使用

pa-0

或

px-0

来具体说明）。

例如，在我的组件内有：

<template>
  <v-row class="image-background">
    <v-col class="pa-0">

      <v-container>
        <v-row>
          <v-col>
            <h2 class="text-h2">Some Text</h2>
          </v-col>
        </v-row>
      </v-container>

    </v-col>
  </v-row>
</template>

<style scoped>
.image-background {
  background-image: url("/images/your-image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 25%;
  min-height: 35vh;
}
</style>

要创建全角部分，请将

pa-0

类添加到其列元素 (

v-col

)。

.image-background

的

类只是添加一个占据整个屏幕宽度的背景图像（因为它位于

fluid

容器内，其父级

v-col

没有填充）。

注意我如何使用另一个容器（没有

fluid

属性）以响应方式保存其内容，包括它的填充和媒体查询断点。

我正在使用 Vuetify v2.6.1 顺便说一句，如果你使用的是普通 Vue 环境，这就是整个结构：

<template>
  <v-app>
    <v-main>
      <v-container fluid>

        <v-row class="some-class">
          <v-col class="pa-0">
            <!-- everything below will take full-width -->
            <!-- unless inside another normal v-container -->
            <img src="/path/to/image">

            <!-- wrap other content inside another v-container -->
            <v-container>
              <v-row>
                <v-col>
                  <h2 class="text-h2">Some Text</h2>
                </v-col>
              </v-row>
            </v-container>

          </v-col>
        </v-row>

      </v-container>
    </v-main>
  </v-app>
</template>

Answer 6

这是我用来删除单选/复选框填充的方法

class="ma-n8 pa-n8"/class="ma-0 pa-0" 删除，添加负数和正数填充