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 个跨度。因此，在这种情况下，您需要执行以下操作：

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

PS：“cols”是 xs 选择器。你在做的是 xs 上的 6 和 sm 上的 12。