如何为 v-btn-toggle 设置最大宽度

Question

我正在尝试使用 vuetify 使我的应用具有某种风格。

但是当我使用移动格式时，我的组件对于我的模态来说太宽了。

My ugly modal

<template>
  <v-container>
    <v-form @submit="addTime">
      <date-picker-component title="Date du jour"/>
      <p>Lieu de départ</p>
      <v-btn-toggle
          :value="getCurrentJournee.lieu_depart"
          mandatory
          @change="setLieuDepart"
      >
        <v-btn
            :value="lieu.domicile">
          Domicile
        </v-btn>

        <v-btn :value="lieu.entreprise">
          Entreprise
        </v-btn>
      </v-btn-toggle>
      <time-picker-component title="Heure de départ" heure="heuredepart"/>
      <time-picker-component title="Heure sur premier chantier" heure="premierchantier"/>
      <p>Temps de pause</p>
      <v-btn-toggle
          v-model="getCurrentJournee.temps_pause"
          shaped
          mandatory
          @change="setTempsPause"
      >
        <v-btn value="30">
          30'
        </v-btn>

        <v-btn value="45">
          45'
        </v-btn>

        <v-btn value="60">
          1h
        </v-btn>

        <v-btn value="75">
          1h15'
        </v-btn>
        <v-btn value="90">
          1h30'
        </v-btn>
      </v-btn-toggle>
      <time-picker-component title="Départ du dernier chantier" heure="dernierchantier"/>
      <time-picker-component title="Heure d'arrivée" heure="heurearrivee"/>


      <p>Lieu de retour</p>
      <v-btn-toggle
          :value="getCurrentJournee.lieu_arrivee"
          mandatory
          @change="setLieuRetour"
      >
        <v-btn :value="lieu.domicile">
          Domicile
        </v-btn>

        <v-btn :value="lieu.entreprise">
          Entreprise
        </v-btn>
      </v-btn-toggle><br><br>

      <v-btn type="submit" color="green" dark @click="$emit('close')"> Enregistrer </v-btn>
      <v-btn color="black" dark @click="$emit('close')"> Fermer </v-btn>
    </v-form>
  </v-container>
</template>

所以这是时间形式，它位于模态下方

<v-dialog
            v-model="modalVisible"
            persistent
            max-width="500px"
            class="ma-0 pa-0"
        >
          <v-card>
            <v-card-title>
              Enregistrement heures
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text>
              <v-container>
                <!-- <v-flex xs6 lg10>                 -->
                <time-form @close="modalVisible = false"></time-form>
                <!-- </v-flex> -->
              </v-container>
              <!-- <small>* précise les champs obligatoires</small> -->
            </v-card-text>
          </v-card>
        </v-dialog>

有什么线索可以缩小范围以适应吗？像最大宽度左右。 请救救我，我必须在星期五之前提交这个哈哈。

编辑：为了更易于理解，我添加了代码，我试图让 v-btn 切换在我使用移动设备时适合第一部分代码，并且我试图不使用 v-select虽然我在考虑越来越多。

Answer 1

如果要对按钮进行换行，可以在 v-btn-toggle 中添加 class="flex-wrap"