Vuetify中的xs断点无法正常工作

Question

我在Vuetify中带有断点时发生了一些意外的行为。我希望我的列从中到Xl并排，对于sm及以下，我希望每一列都占据整个行（一个在另一个的顶部）。我看到的是，从XL到M，各列按预期并排显示。视口缩小后，它们会按预期显示在彼此的顶部。但是一旦涉及到xs，它们就会并排，我不明白。这是该代码的缩写版本。如果我有任何问题，请通知我。我看了几篇文章，看来与提议的解决方案非常一致。

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="6" sm="12">
          <v-card height="100%">
            <v-card-title>Classes</v-card-title>
            <v-card-text>
              <!-- text redacted for brevity -->
            </v-card-text>
          </v-card>
        </v-col>

        <v-col cols="6" sm="12">
          <v-card height="100%">
            <v-card-title>Requirements</v-card-title>
            <v-card-text>
              <!-- text redacted for brevity -->
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

我也尝试了更明确的定义，但无济于事，如下所示：

<v-col med="6" sm="12">
<v-col cols="6" med="6" sm="12">

等...

Answer 1

如果我理解正确，您希望在xs和sm上跨度为12，从md到6跨度为6。因此，在这种情况下，您需要执行以下操作：

<v-col cols="12" md="6">
<v-col cols="12" md="6">

PS：“ cols”是xs选择器。您正在执行的操作是在xs上为6，在sm上为12。