Question

我试图在一个 v-row 中放入两个 v-cols，一个是 2 cols 宽，另一个是 10。v-cols 的 for 循环（或默认行为）似乎导致了 v-前 2 张后的卡片粘在屏幕的左侧，当我希望它们与前两张卡片保持相同的对齐方式时。第一组 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">

v-col 的 Vuetify justify-end

1 个答案: