我有一個外部 Vue 模板：
<template>
<v-container fluid>
<div>
<v-row>
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
<gokb-reviews-title-card
:id="i.id.toString()"
@keys="addkeyFields"
/>
</v-col>
</v-row>
</div>
</v-container>
</template>
和一個內部 Vue 模板 ( gokb-reviews-title-card)
<template>
<v-card class="elevation-4 flex d-flex flex-column" v-if="!!title?.name">
<v-card-title primary-title>
<h5 class="titlecard-headline">{{ title.name }}</h5>
</v-card-title>
<v-card-text class="flex" v-for="(i, count) in title.identifiers" :key="i.id">
<div v-if="count == 0">{{ $tc('component.identifier.label', 2) }}</div>
<div class="titlecard-ids" :class="i.namespace.value">{{ i.namespace.value }}: {{ i.value }}</div>
</v-card-text>
<v-card-text class="flex" v-if="!!title?.history">
<div class="titlecard-history">{{ $t('component.title.history.label') }}</div>
<div class="titlecard-history">{{ title.history }}</div>
</v-card-text>
</v-card>
</template>
該行由 3gokb-reviews-title-card秒組成。我想要4張卡。
我試圖通過添加cols="3"到這個問題v-col中討論的內容來改變它。這沒有顯示任何效果。
將 CSS 添加.grid到最外層<div>（在此處討論）可以更改卡片的寬度，但每行的最大卡片數保持為 3。那么該行是“半填充”。我嘗試的 CSS 是：
.reviews-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
};
我怎樣才能使<v-row>包含 4 個<v-col>每個包含 1 個卡？
uj5u.com熱心網友回復：
我想這是因為你md="4"有
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
如果您將其更改為 3 它應該可以作業，因為它是基于 12 的網格
<v-col md="3" class="pa-1" v-for="i in allComponents" :key="i.id">
此外，您cols="3"可能無法正常作業，因為它僅適用于比md斷點窄的寬度。
如果您使用回應式布局，請保留md，但還要定義其他寬度，通過cols或xs。否則只需使用cols
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/521070.html
下一篇：如何使用v-for添加組圖示？