외부 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-cards. 카드 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