以 vuetify 形式减小高度和行距答案

【问题标题】：decrease height and row spacing in vuetify form以 vuetify 形式减小高度和行距
【发布时间】：2020-05-30 02:35:50
【问题描述】：

我正在尝试使用vuetify 制作一个表单，基本上就是复制这个表单。

经过多次尝试后，我尝试使用 vuetify 网格和列

我想减小输入的高度以及行间距。

直播代码sn-phttps://codepen.io/ijunaid8088/pen/xxGZzGv

【问题讨论】：

是否可以从您的代码中创建一个工作示例，对我来说一切都很好
是的，我正在添加一个
我的问题是我想减少输入的高度以及我想减少每行上下的空间
我遇到了你的问题，但需要工作示例来修复它，大致我会说它是导致输入部分高度的边距
用实时链接更新了它

标签： css vue.js vuetify.js

【解决方案1】：

最好的解决方案是在每个 v-col 中使用 py：使用 py="1" 将使用 4px，或者您希望行的底部和顶部的另一个值。

https://vuetifyjs.com/en/styles/spacing/#how-it-works

【讨论】：

【解决方案2】：

您可以使用“密集”来做到这一点。示例如下。

<v-text-field label="First name" outlined dense> </v-text-field>

【讨论】：

【解决方案3】：

您需要覆盖适当元素上的填充（和/或边距）值。

我建议将class 或id 放在您要修改的所有字段的共同祖先上（<v-container> 上的inputs-container 类，在下面的示例中），这样您就可以只定位该元素内的输入，因此您无需更改应用中的所有输入：

.inputs-container {
  .col-12 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .theme--light.v-input {
    padding-top: 0;
  }
  .v-input__slot {
    margin-bottom: 0;
  }
}

看working。

【讨论】：

【解决方案4】：

无需更改默认库样式的最佳解决方案

添加网络摄像机

    <v-col cols="12" md="4">
      <v-text-field
        v-model="lastname"
        :rules="nameRules"
        label="Last name"
        required
      ></v-text-field>
    </v-col>

    <v-col cols="12" md="4">
      <v-text-field
        v-model="email"
        :rules="emailRules"
        label="E-mail"
        required
      ></v-text-field>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="12" md="4">
      <v-text-field
        v-model="firstname"
        :rules="nameRules"
        label="First name"
        required
      ></v-text-field>
    </v-col>

    <v-col cols="12" md="4">
      <v-text-field
        v-model="lastname"
        :rules="nameRules"
        label="Last name"
        required
      ></v-text-field>
    </v-col>

    <v-col cols="12" md="4">
      <v-text-field
        v-model="email"
        :rules="emailRules"
        label="E-mail"
        required
      ></v-text-field>
    </v-col>
  </v-row>
</v-container>
      </v-col>
      <v-col cols="4">4</v-col>
    </v-row>
  </v-container>
</template>
  </v-app>
</div>
//CSS
    .v-text-field {
        margin: 0;
        padding: 0;
    }

【讨论】：