断点无法在 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 个。