"Vuetify卡片网格与分隔线对齐[重复]"

Question

这个问题在这里已经有了答案：

在最后一行或特定行上定位弹性项目<\/a>10 个答案<\/span>

3 小时前<\/span>关闭。

<\/aside>

我正在尝试使用 Vuetify 制作一个包含图像和标题的卡片网格。

我已经在几个例子的帮助下成功地制作了一个网格并设法做到了（这是在断点 XL 上）：

但问题是，如果屏幕变小，网格就不再是网格了，而是看起来像这样（这是在断点 LG 上）：

我正在使用 justification: space-between<\/code>但如果我使用start<\/code>这是结果：

我的目标是让网格与上面的v-divider<\/code>对齐，并且在开始时也是合理的，而 LG 断点的第二行没有尴尬的间隙。

这是我的代码：

Answer 1

我想，正确的答案是：您不应该<\/strong>出于这些目的使用v-col<\/code>和v-row<\/code>类中的弹性框。

在这个问题<\/a>中，您可以找到各种各样的答案。 但它们中的大多数看起来像拐杖或导致意想不到的效果。

但是您可以使用CSS 网格布局<\/a>来解决您的问题。

因此，将您的行代码更改为：

<v-row :justify="$vuetify.breakpoint.smAndDown ? 'center' : 'space-between'" :class="getClassByScreenSize()">
  ...
</v-row>

Answer 2

就像第二个v-row<\/code>写下第一个v-row<\/code>条件：

<v-row :justify="$vuetify.breakpoint.lgAndUp ? 'space-between' : 'start'">