Vuetify表单输入框宽度调整及元素间距设置问题

1. 设置搜索输入框为容器宽度的80% #

Vuetify的v-text-field默认继承父容器宽度，直接使用内置宽度工具类w-80就能快速设置为80%宽度，比单独用width属性更可靠：

<v-text-field 
  v-model="search" 
  label="Search" 
  required
  class="w-80"
></v-text-field>

也可以用内联样式直接指定：style="width: 80%;"，效果一致。

2. 添加输入框与按钮的间距 #

因为v-text-field和v-btn默认是块级元素，会自动换行，给按钮添加上边距类mt-4（数值可按需调整，比如mt-2对应小间距）即可拉开距离：

<v-btn class="mt-4 mr-4" @click="submit">submit</v-btn>

（可选）让输入框和按钮同行排列 #

如果希望两个元素在同一行显示，用v-row和v-col布局更规整，同时控制输入框宽度接近80%：

<form>
  <v-row align="center">
    <v-col cols="10">
      <v-text-field 
        v-model="search" 
        label="Search" 
        required
        full-width
      ></v-text-field>
    </v-col>
    <v-col cols="2">
      <v-btn class="ml-2" @click="submit">submit</v-btn>
    </v-col>
  </v-row>
</form>

这里输入框占10列（约容器宽度的83%），按钮占2列，自动生成间距，也可以调整cols数值来精确控制宽度比例。

完整修改代码 #

<template>
  <v-container>
    <v-row class="my-8">
      <v-col>
        <h2 class="my-4">Giphy Search App</h2>
        <form>
          <v-text-field 
            v-model="search" 
            label="Search" 
            required
            class="w-80"
          ></v-text-field>
          <v-btn class="mt-4 mr-4" @click="submit">submit</v-btn>
        </form>
      </v-col>
    </v-row>
  </v-container>
</template>

内容的提问来源于stack exchange，提问作者theplaceofburak