css - Vuetify.js 网格 | v-row 保持超过移动视口(viewport)宽度

Question

我正在使用 Vuetify.js 的 v-container > v-layout > v-row，并且 v-row 的内容不断超出视口(viewport)的宽度。我尝试了“overflow-x-hidden”类，但这不是我所期望的。

如果你让我知道让 v-row 填充视口(viewport)的宽度而不超过它，我将非常感激。

谢谢

<template>
  <div id="app" class="back">
    <v-container fluid>
      <v-layout row wrap>
        <v-row >
          <br><br><br><br>asdf
        </v-row>
      </v-layout>
    </v-container>
  </div>
</template>

Answer 1

v-row 组件并非设计用于直接包含您的内容。在 v-row 中，您的内容的每个部分都应该包装在一个 v-col 组件中，如下所示:

<template>
  <div id="app" class="back">
    <v-container fluid>
        <v-row >
          <v-col cols="12"> <!-- You can change the COLS attribute to make columns display side-by-side -->
            <br><br><br><br>asdf
          </v-col>
        </v-row>
    </v-container>
  </div>
</template>

您可以阅读有关 Vuetify 网格系统的更多信息 here .

编辑:

此外，您不应将 v-layout 和 v-row 组合使用。 v-layout 适用于 Vuetify 1.x。 v-row 适用于 Vuetify 2.x。如果你使用v-layout，它的子组件应该是v-flex而不是v-col。