断点时1.5至2.0列换行

Question

我在Vuetify 2.0中失去了理智，我需要将旧的布局/flex转换为新的行/列语法，但我似乎无法做到这一点。

我需要将以下代码转换为新的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之间，然后调整您的颜色大小视口。

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

我更喜欢后者。