vuetify grid nested row: понимание системы 12 столбцов - PullRequest
Новая
       21

vuetify grid nested row: понимание системы 12 столбцов

1 голос
/ 29 мая 2020

Я новичок в vue. js и vuetify, и я играю с примером сетки vuetify.

Я пытаюсь получить одинаковый размер для cols-4 и cols-7 карты и столбцы-3 и столбцы-5 карты

что у меня есть

ожидается 

<div id="app"><v-app id="inspire">
<v-container class="grey lighten-5">
  <v-row>
    <v-col cols="12">
      <v-card>
        .col-12
      </v-card>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="4">
      <v-card>
        .col-4
      </v-card>
    </v-col>
    <v-col cols="3">
      <v-card>
        .col-3
      </v-card>
    </v-col>
    <v-col cols="5">
      <v-card>
        .col-5
      </v-card>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="7">
      <v-row>
        <v-col cols="12">
          <v-card>
            .col-12
          </v-card>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="7">
          <v-card>
            .col-7
          </v-card>
        </v-col>
        <v-col cols="5">
          <v-card>
            .col-5
          </v-card>
        </v-col>
      </v-row>
    </v-col>
    <v-col cols="5">
      <v-card>
        .col-5 Subsequent columns continue along the new      line.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </v-card>
    </v-col>
  </v-row>
</v-container>

код: https://codepen.io/Biereblonde/pen/bGVPMKZ

спасибо

...