Vuetify 1.5 到 2.0 断点换行

Question

我对 Vuetify 2.0 失去了理智，我需要将旧的布局/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 大小视口。

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

我更喜欢后者。