以可视化形式减小高度和行间距

2020-02-14 css vue.js vuetify.js

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

在此处输入图片说明

经过很多尝试后,我尝试使用vuetify网格和列

在此处输入图片说明

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

实时代码段https://codepen.io/ijunaid8088/pen/xxGZzGv

Answers

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

我建议在您要修改的所有字段的公共祖先上放置一个classid (在下面的示例中, <v-container>上的inputs-container类), classid只能将该元素内的输入作为目标,因此您无需更改应用程序中的所有输入:

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

看到它工作

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

添加网络摄像机

    <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;
    }

Related