【发布时间】：2021-09-29 06:39:12
【问题描述】：
我想设置一个 v-col
lg="6" md="6" sm="6"
并将mx-auto 保留在xlOnly 中
但是当我这样做并且我在超大显示器上时，v-col 需要 6 列，而 mx-auto 应该小得多
有没有人知道我该如何解决这个问题 谢谢
【问题讨论】：
标签： html css vue.js vuetify.js overflow
【发布时间】：2021-09-29 06:39:12
【问题描述】：
我们需要设置所有的 vuetify 断点吗？
您不需要设置所有断点。作为使用移动优先方法完成的断点系统 - 您可以仅设置 1 个较小的断点，在您的示例中为 sm="6" 。如果在更大的屏幕上没有显示覆盖，它将在所有等于或高于 sm (sm + md + lg + xl) 的屏幕上占用 6 列。因此，如果您添加 lg="8"，则 sm + md 将占用 6 列，lg 和 xl 将占用 8 列。来源：SM - Changes the number of columns on small and greater breakpoints、Vuetify docs
将 mx-auto 保留在 xlOnly 中
您可以使用 mx-xl-auto - 将其标记为 {property}{direction}-{breakpoint}-{size}。 Vuetify docs
在超大显示器上，v-col 需要 6 列，而它应该更小
没有理由让列小得多，mx-auto 将主轴（在您的情况下为水平）边距设置为 auto，因此它使 col 居中。它不会以任何方式影响宽度。您可以尝试添加 xl="auto"，它应该让块只占用它需要的空间。如果它看起来不正确 - 只需设置所需的列数（例如：xl="4"）
【讨论】：
-
问题是我有 5 个组件需要相同的宽度，所以我不能硬编码你所说的确切列数，因为我不能将 12 个列分成 5 个相等的部分和 xl="auto" 正如你所说的只占用它需要的空间，但它不能解决我的问题我希望它们共享相等的宽度并完全填充 v-row
-
同时使用 mx-xl-auto 和 lg="6" md="6" sm="6" mx-xl-auto 被覆盖