외부 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
s. 카드 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장의 카드가 들어있습니까?
질문에 대한 답변
내 생각엔 네가…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