Vuetify 问题与 v-col 的宽度

Question

我想在下面的代码中使用 h1 将 v-col 宽度设置为页面的 100%，我该怎么做？

<v-main class="pt-0 black" max-width="auto">
    <v-row>
        <v-col cols="auto">
            <v-img src="@/assets/images/riot-logo.png"></v-img>
        </v-col>
        <v-col cols="auto">
          <v-container class="riot-text">
            <h1 class="text-center">Riot Games</h1>
          </v-container>
        </v-col>
    </v-row>
</v-main>
</template>

Answer 1

这些列彼此相邻，因此如果不将另一列设置为零，则无法使其中一列达到 100%。为了将列宽度设置为 100%，您需要将每一列放在它自己的行中。 I also removed cols="auto" 属性。

<v-main class="pt-0" max-width="auto">
            <v-row>
                <v-col cols="auto">
                    <v-img src="@/assets/images/riot-logo.png"></v-img>
                </v-col>
            </v-row>
            <v-row>
                <v-col>
                    <v-container class="riot-text fluid">
                        <h1 class="text-center">Riot Games</h1>
                    </v-container>
                </v-col>
            </v-row>
        </v-main>

Vuetify 问题与 v-col 的宽度

Vuetify problems with the width of a v-col

vuetify.js