gpt4 book ai didi

html - Vuetify 卡片网格与分隔线对齐

转载 作者:行者123 更新时间:2023-12-05 04:35:33 26 4
gpt4 key购买 nike

<分区>

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

我已经在一些示例的帮助下成功地制作了一个网格并成功地做到了这一点(这是在断点 XL 上):

Grid in XL breakpoint

但问题是,如果屏幕变小,网格就不再是网格了,而是看起来像这样(这是断点 LG):

Grid in LG breakpoint

我使用的是对齐方式:space-between 但如果我使用 start 则结果如下:

Grid in LG breakpoint with justify-start

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

这是我的代码:

<v-container>
<v-row justify="space-between">
<v-col md="6" cols="12">
<h1>Grid</h1>
</v-col>

<v-col md="6" cols="12">
<v-text-field
outlined
dense
hide-details
:placeholder="$t('search')"
prepend-inner-icon="mdi-magnify"
:class="$vuetify.breakpoint.smAndUp ? 'mt-2' : ''"
></v-text-field>
</v-col>
</v-row>

<v-row justify="space-between">
<v-col cols="12">
<v-divider></v-divider>
</v-col>
</v-row>

<v-row :justify="$vuetify.breakpoint.smAndDown ? 'center' : 'start'">
<v-col cols="auto" v-for="(item, index) in machines" :key="index">
<v-hover v-slot="{ hover }">
<v-card class="mb-4" :elevation="hover ? 5 : 2">
<v-card-text>
<v-img
src="https://static.wikia.nocookie.net/bc87eadb-62dd-4748-bcb6-cc4f38594988"
contain
:width="$vuetify.breakpoint.lgAndUp ? '300' : '385'"
height="250"
></v-img>
</v-card-text>

<v-card-actions>
<v-btn text color="deep-orange">
Arthur Morgan
</v-btn>
</v-card-actions>
</v-card>
</v-hover>
</v-col>
</v-row>
</v-container>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com