使用 Vuetify 对 vue 中的列重新排序

Question

我正在使用 Vuetify，并试图让我的网站响应，所以当它在 xs（移动 phone 屏幕尺寸）时，cols 应该从 cols="4" 到 cols=" 2”。这行得通，但我还想通过在 v-col 元素上使用 order-xs="first" 来重新排序我的列，使其位于其他 v-col 的顶部。

如果我在相应的尺寸上使用 order-sm="first" 或 order-md="first"，但在 xs 上不使用，它会起作用。

xs 是否有错误，或者它不应该工作？

<v-row align="center">
          <v-col cols="4" sm="2">
            <v-text-field
              dense
              hide-details
              label="Start"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>
          <v-col cols="4" sm="2">
            <v-text-field
              dense
              hide-details
              label="Slutt"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>
          <v-col cols="4" sm="2">
            <v-text-field
              dense
              hide-details
              label="Dato"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>

          <v-spacer></v-spacer>

          <v-col cols="4" sm="2" order-xs="first"> //not working
            <v-text-field
              dense
              hide-details
              label="Søk"
              color="#01AB55"
              outlined
            ></v-text-field>
          </v-col>
          <v-col cols="4" sm="2" order-xs="first">  //not working
            <v-btn color="#01AB55"><span>Søk</span></v-btn>
          </v-col>
        </v-row>

Answer 1

对于 xs，正确的属性名称是 order。

使用 Vuetify 对 vue 中的列重新排序

Reordering columns in vue with Vuetify

vue.js

vuetify.js