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尺寸视口。

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

我希望以后。

Answer 2

什么是Vuetify 2.0中给定的以下代码的替代

在断点处Vuetify 1.5至2.0列换行

2 个答案: