如何减小v-switch的宽度答案

【问题标题】：How to reduce the width of v-switch如何减小v-switch的宽度
【发布时间】：2021-11-10 10:28:18
【问题描述】：

v-switch 似乎总是占用 100% 的宽度，如下所示。有没有办法将其可点击区域减少到最小？谢谢！

空白处可点击的 v-switch：https://vuetifyjs.com/en/components/switches/#usage

【问题讨论】：

【解决方案1】：

我建议您阅读 vuetify 文档中的this link。 v-switch 继续在页面右侧的原因是其上方的 v-container。您可以使用 vuetify grid system 修改布局，如下所示：

一个 Vue js 页面

<template>
  <div class="about">
    <v-container
      class="px-0"
      fluid
    >

      <v-row>
        <v-col md="4">
          <v-switch
            class="my-border"
            v-model="switch1"
            :label="`Switch 1: ${switch1.toString()}`"
          ></v-switch>
        </v-col>
      </v-row>
      
    </v-container>
  </div>
</template>

<script>
export default {
  data () {
      return {
        switch1: true,
      }
    },
}
</script>

<style scoped>
.my-border {
  border: 1px solid #000;
}
</style>

【讨论】：

感谢您的解释和简单的解决方案

【解决方案2】：

您可以将d-inline-block 类添加到v-switch，这会将 div 宽度减小到内容的最大宽度。

正如前面的答案所解释的那样，另一种方法是将其包装在一行/列中。不要设置列值或将其设置为数字，因为col-auto 可能会导致它比预期更窄并导致标签跨越多行。

【讨论】：