Question

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

 <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图标

Answer 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>

Answer 2

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

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

不是100％知道为什么，但是这迫使标签在2行上

在两行上查看v-switch标签

2 个答案: