两行 vuetify v-switch 标签答案

【问题标题】：vuetify v-switch label on two lines两行 vuetify v-switch 标签
【发布时间】：2019-12-20 16:19:27
【问题描述】：

出于某种原因，无论我在这里做什么标签都拒绝在一行上，这是我的代码：

 <v-container class="px-3">
    <v-layout justify-center>
      <v-flex xs12 sm10>
       <v-layout align-center justify-start>
         <v-flex lg3>
             <v-switch v-model="displayAllUsers"
                        @click.native.stop
                        color="primary"
                        :label="'All users'"
                        @change="toggleAllUsers()"
                        ></v-switch>

            </v-flex>
         </v-layout>
      </v-flex>
    </v-layout>
 </v-container>

还附上一张它的样子的图片。

Vuetify 1.5.14，使用可能与此相关的 SVG 图标

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

这里对我来说很好用。

也许是因为那个容器中有什么东西导致了这个问题。

您能否提供有关该容器中其他内容的更多信息？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      displayAllUsers: true
    }
  },
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.css" rel="stylesheet"/>

<div id="app">
  <v-app>
      <v-flex lg3>
        <v-switch 
          v-model="displayAllUsers"             
          @click.native.stop
          color="primary"
          :label="'All users'"                  
          @change="displayAllUsers= false"
         ></v-switch>
      </v-flex>
  </v-app>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.7/vuetify.js"></script>

【讨论】：

我认为你是对的，但对于我的一生，我无法弄清楚这个问题，将添加问题附加代码。
@Michael 是的，如果可以共享其他代码，它将有助于调试。

【解决方案2】：

经过大量的调查，我发现有人用这样的全局类覆盖了 vuetify 类：

.v-input--selection-controls .v-input__control
    margin-left: 89%;

不是 100% 确定原因，但这迫使标签位于 2 行

【讨论】：