Vuetify v-flex offset-*(1-12) 无法正常工作

【问题标题】：Vuetify v-flex offset-*(1-12) not working properlyVuetify v-flex offset-*(1-12) 无法正常工作
【发布时间】：2019-07-02 15:38:04
【问题描述】：

在撰写本文时，我正在使用 Vuetify 1.5.0。但是，当我尝试对 v-flex 上的任何断点使用偏移量时，它会在该断点上添加偏移量，在这种情况下，它会在 md 和 up 上添加偏移量。下面是我的代码。请问我在这里做错了什么以及如何纠正这个问题。

 <v-container class="teal">
    <v-layout row wrap class="red">  
      <v-flex sm12 md8 lg7 offset-md2 class="blue">
          <h1>Hello</h1>
      </v-flex>
      <v-flex sm12 md8 lg5 offset-md2 class="orange">
         <h1>Hello Hi</h1>
      </v-flex>
    </v-layout>
 </v-container>

并且是在lg屏幕上截取的屏幕截图。

如您所见，它的换行列即使不应该换行。

谢谢，阿米特

【问题讨论】：

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

如果您不指定任何“上”偏移量（如offset-lg*），则应用于md 及以上 的offset-md2 是预期行为。同样，当您指定 sm8（对于 small）并且未指定任何 md* 或 lg* 时，sm8 将应用于 sm 及以上。

如果您想忽略大屏幕上的偏移，可以使用offset-lg0，如下所示：

<v-container class="teal">
    <v-layout row wrap class="red">  
      <v-flex sm12 md8 lg7 offset-md2 offset-lg0 class="blue">
          <h1>Hello</h1>
      </v-flex>
      <v-flex sm12 md8 lg5 offset-md2 offset-lg0 class="orange">
         <h1>Hello Hi</h1>
      </v-flex>
    </v-layout>
 </v-container>

【讨论】：