vue.js - 无法使用 vuetify 删除 v-text-field 和标签之间的空白

Question

我正在尝试使用 vuetify 减少行之间的巨大差距，但无法减少。我也尝试使用 css 和 vuetify 间距，但不起作用。

预期形式

实际形式

<v-container>
  <v-row>
    <v-col cols="4">
      First Name
    </v-col>
    <v-col cols="4">
      <v-text-field v-model="firstname" :rules="nameRules" label="first name" required class="ma-0 pa-0"></v-text-field>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="12" md="4">
      Last Name
    </v-col>
    <v-col cols="12" md="4">
      <v-text-field v-model="lastname" :rules="nameRules" label="Last name" required class="ma-0 pa-0"></v-text-field>
    </v-col>
  </v-row>

Answer 1

使用类 'ma-x' 或 'pa-x' 从行和列中删除额外的填充和边距，其中 x id 编号为 0-12。

请参考：https ://vuetifyjs.com/en/styles/spacing/