vuetify.js - vuetify 中的 xs 断点无法正常工作

Question

我在 Vuetify 中遇到了一些意外的断点行为。我希望我的列从 medium 到 xl 并排排列，对于 sm 及以下，我希望每列占据整行(一个在另一个之上)。我看到的是，从 XL 到 M，列按预期并排显示。一旦视口(viewport)缩小到很小，它们就会按预期显示在彼此的顶部。但是一旦到达 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">

ETC...

Answer 1

如果我理解正确，您需要 xs 和 sm 上的 12 个跨度和 md 及以上的 6 个跨度。因此，在这种情况下，您需要执行以下操作:

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

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