уменьшить высоту и расстояние между строками в форме vuetify

Question

Я пытаюсь создать форму, используя vuetify, которая в основном копирует эту форму.

Я пытался использовать сетку vuetify и столбцы после большого количества попыток я получил это

Я хочу уменьшить высоту входных данных, а также расстояние между строками.

Фрагмент кода в реальном времени https://codepen.io/ijunaid8088/pen/xxGZzGv

Answer 1

Наилучшее возможное решение без изменения стилей библиотеки по умолчанию

Добавить IP-камеру

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

Answer 2

Вы можете использовать "плотный", чтобы сделать это. Пример показан ниже.

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

Answer 3

Вам необходимо переопределить значения заполнения (и / или поля) для соответствующих элементов.

Я бы порекомендовал поместить class или id на общего предка всех полей, которые вы хотите изменить (класс inputs-container на <v-container>, в примере ниже), что позволяет вам нацелить только на входы внутри этого элемента, чтобы не изменять все входы в приложении:

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

См. работает .