更改Vue中的网格列

Question

我有一个外部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>

这一行由3张gokb-reviews-title-card组成，我想要4张卡片。

我试图通过将cols="3"添加到v-col中来更改它，就像this question中讨论的那样。这并没有显示出任何效果。

将CSS .grid添加到最外层的<div> (讨论的here)中可以改变卡的宽度，但每行的最大卡数为3，行为“半填充”。我尝试的CSS是：

.reviews-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
};

如何使<v-row>包含4 <v-col>s，每个包含1张卡？

Answer 1

我想是因为你有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