Vuetify justify-end for v-col

Question

我试图在一个 v 行中放置两个 v-cols，一个是 2 列宽，另一个是 10 列。v-cols 的 for 循环（或默认行为）似乎导致了前 2 张之后的 v-cards 贴在屏幕的左侧，当我希望它们与前两张卡片保持相同的对齐方式时。第一组 v-cols 是一个侧面组件，而第二组 v-cols 是一个网格。

有没有办法让网格中的所有 v-card 都对齐到右侧，这样一旦侧面组件结束它们就不会恢复到左侧？

<template>
  <div>
    <TopNavbar />
    <v-app id="bigGrid">
      <div>
        <v-container>
          <v-row class="grey" align-md="right">
            <v-col cols="12" sm="12" md="12" lg="2" xl="2">
              <v-card class="pa-8" style="height: 30vh" outlined title>
                Side Stuff
              </v-card>
            </v-col>
            <v-col
              justify="end"
              v-for="n in 6"
              :key="n"
              cols="12"
              md="5"
              lg="5"
              xl="5"
            >
              <v-card style="height:25vh" class="pa-8" outlined title>
                <v-card-title> Category Name</v-card-title></v-card
              >
            </v-col>
          </v-row>

          ></v-container
        >
      </div></v-app
    >
  </div>
</template>

Codepen Link:

Answer 1

我更新后的代码如下

<div id="app">
  <v-app id="bigGrid">
    <div>
      <v-container>
        <v-row class="grey" align-md="right">
          <v-col cols="12" lg="2">
            <v-card class="pa-8" style="height: 30vh" outlined title>
              Side Stuff
            </v-card>
          </v-col>
          <v-col cols="12" lg="10">
            <v-row>
              <v-col
                v-for="n in 6"
                :key="n"
                cols="12"
                md="5"
              >
                <v-card style="height:25vh" class="pa-8" outlined title>
                  <v-card-title> Category Name</v-card-title></v-card
                >
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-app>
</div>

主页应包装到另一个 <v-col> 组件中，网格组件可以放入其中（<v-row> 在这种情况下）
justify="end" 应用于组件
<v-col cols="12" sm="12" md="12" lg="2" xl="2">可以最小化为<v-col cols="12" lg="2">。 <v-col justify="end" v-for="n in 6" :key="n" cols="12" md="5" lg="5" xl="5">

Vuetify justify-end for v-col

Vuetify justify-end for v-col

html

vuejs2

vuetify.js