vuetify.js - Vuetify 1.5 到 2.0 断点上的列换行

Question

我对 Vuetify 2.0 失去了理智，我需要将旧的 layout/flex 转换为新的 row/col 语法，但我似乎做不到。

我需要将以下内容转换为新的 2.0 语法:

<v-layout row wrap>
  <v-flex xs12 sm4> 1 </v-flex>
  <v-flex xs12 sm4> 2 </v-flex>
  <v-flex xs12 sm4> 3 </v-flex>
</v-layout>

这将在 XS 设备上包装列，在 SM 设备上排成一行。

我有以下内容，但是如何用断点“包装”它们？

<v-row>
  <v-col xs="12" sm="4" >1</v-col>
  <v-col xs="12" sm="4" >2</v-col>
  <v-col xs="12" sm="4" >3</v-col>
</v-row>

在 XS 设备上，它应该是:
1
2
3

相反，我把它们放在一起:1 2 3

这比它应该更烦我:(

Answer 1

要使其工作，您必须设置 cols至auto或在 1-12 之间，然后调整您的 col 大小视口(viewport)。

<v-row>
  <v-col cols="auto" md="4" sm="12" >1</v-col>
  <v-col cols="auto" md="4" sm="12" >2</v-col>
  <v-col cols="auto" md="4" sm="12" >3</v-col>
</v-row>

或者

<v-row>
  <v-col cols="12" md="4" sm="12" >1</v-col>
  <v-col cols="12" md="4" sm="12" >2</v-col>
  <v-col cols="12" md="4" sm="12" >3</v-col>
</v-row>

我更喜欢后者。