如何减少V型开关的宽度

Question

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

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

Answer 1

您可以将

d-inline-block

类添加到

v-switch

，这会将 div 宽度减小到内容的最大宽度。

正如前面的答案所解释的，另一种方法是将其包装在行/列中。要么不要设置列值，要么将其设置为数字，因为

col-auto

可能会导致它比预期更窄并导致标签跨越多行。

Answer 2

我建议您阅读 vuetify 文档中的 此链接。 v-switch 继续到页面右侧的原因是其上方的 v-container。您可以使用 vuetify 网格系统修改布局，如下所示：

一个 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>

Answer 3

可以用

<v-card>

包裹它来达到效果。

                   <v-card flat class="pa-2" color="transparent"> </v-card>