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

【问题标题】：Vuetify.js Grid | v-row keep exceeding mobile viewport widthVuetify.js 网格 | v-row 保持超过移动视口宽度
【发布时间】：2020-05-01 02:30:24
【问题描述】：

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

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

谢谢

<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>

【问题讨论】：

您的问题解决了吗？如果没有，请添加更多信息，以便我们继续为您提供帮助。如果您的问题现在已解决，请接受正确答案或添加您自己的答案，以便社区可以从您的反馈中受益。谢谢！

标签： css vue.js vuetify.js

【解决方案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。

【讨论】：