Отображение элементов карты сетки непрерывно и равномерно без пробелов

Я пытаюсь равномерно и непрерывно отображать элементы карточки одной и той же категории внутри сетки, не начиная новую строку.

Как видите, 110-02641AR находится рядом с 110-02642AL, ​​но пространство больше, чем для остальных элементов. И, например, 128-02545R начинается с новой строки вместо продолжения со следующей строки с 125-02028L.

скриншот

Я пробовал все форматирование макета сетки, такое как выравнивание и выравнивание. Я также попытался удалить div.

<v-layout v-for="(parentKey,j) in filteredGroupedParts" :key="j">
    <div>
        <v-subheader class="partCatSub" row style="padding-top:15px">
            {{parentKey.group}}
            <a :name="parentKey.group"></a>
        </v-subheader>
        <v-container fluid grid-list-sm>
            <v-layout row wrap>
                <div v-for="(key,i) in parentKey.partGroups" :key="i">
                    <v-layout row wrap>
                        <v-flex shrink v-for="(key1,i1) in key.parts" :key="i1">
                            <v-card :class="[isActive?'selectedpart':'card']" @click="isActive=!isActive">
                                <v-card-title primary class="title" style="padding-bottom:0px">
                                    {{key1.interchangeNo}}
                                    <v-spacer></v-spacer>
                                    Qty. {{key1.quantity}}
                                </v-card-title>
                                <v-card-title style="padding-top:7px;height:86px">{{key1.description}}</v-card-title>
                                <v-card-title style="padding-bottom: 0px;padding-top:0px;font-weight: bold">
                                    {{key1.soldLastThirtyDays}} (${{key1.avgPriceLastThirtyDays}}) |
                                    {{key1.soldLastSixtyDays}} (${{key1.avgPriceLastSixtyDays}}) |
                                    {{key1.soldLastNinetyDays}} (${{key1.avgPriceLastNinetyDays}})
                                    <v-spacer></v-spacer>
                                    Lookups: {{key1.partActivityLastYear}}
                                </v-card-title>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </div>
            </v-layout>
        </v-container>
    </div>
</v-layout>

person rdan    schedule 17.09.2019    source источник


Ответы (1)


Фиксированный! Чтобы отобразить 2 div с v-for внутри, вам нужно заменить первый div шаблоном, и он работает.

person rdan    schedule 17.09.2019