vuetify 中的 xs 断点不能正常工作

Question

我在 Vuetify 中遇到断点的一些意外行为。我希望我的列从 medium 到 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。

vuetify 中的 xs 断点不能正常工作

Breakpoints not working correctly for xs in vuetify

vuetify.js

breakpoints