如何为更大的屏幕尺寸减小 Vuetify Grid 列宽答案

【问题标题】：How to reduce Vuetify Grid column width for bigger screen sizes如何为更大的屏幕尺寸减小 Vuetify Grid 列宽
【发布时间】：2020-04-30 01:58:48
【问题描述】：

我正在使用vuetify 网格系统来构建回复组件。图标栏和回复栏的栏目比例分别为 1:11。下面是它的代码

<v-row justify="center" class="ma-0 pa-0">
    <v-col
      id="vote-col"
      cols="1"
      class="pa-0 d-flex flex-column align-center"
    >
      <v-icon size="24">mdi-thumb-up</v-icon>
      <span>{{ likes }}</span>
    </v-col>
    <v-col id="question-col" cols="10" class="pa-0">
      <v-row class="ma-0 replyFont">
        {{ reply }}
      </v-row>
    </v-col>
  </v-row>

这在较小的屏幕上看起来不错。但是当我们在超过 1100px 的屏幕尺寸上进行时，即使cols="1" 也会变得太宽，并在图标列和回复列之间产生很大的空间，如下图所示

如何修复v-col 的宽度超出要求？我知道对于cols 财产，我不能少于1。你们是怎么处理的？

【问题讨论】：

你有没有试过应用max-width风格一号v-col？
@MichalLevý 作为 CSS 解决方法确实有帮助，但我们有来自 vuetify 网格系统的任何东西吗？
我不这么认为。设置 cols="1" 将使用带有 max-width: XX% 的 CSS 类，其中 XX 计算为 100/12 * number of columns（您可以在 Devtools 中检查自己）所以您唯一的选择是用您自己的样式覆盖它...

标签： css vue.js vuejs2 vuetify.js css-grid

【解决方案1】：

您可以使用cols="auto" 使该列成为其内容的宽度，然后在另一列上不使用 cols 属性来允许它增加剩余的宽度。

    <v-row justify="center" class="ma-0 pa-0">
            <v-col id="vote-col" cols="auto" class="blue py-0 d-flex flex-column align-center">
                <v-icon size="24">mdi-thumb-up</v-icon>
                <span>0</span>
            </v-col>
            <v-col id="question-col" class="pa-0">
                <v-row class="ma-0 replyFont">
                    ...
                </v-row>
            </v-col>
    </v-row>

演示：https://codeply.com/p/pX7pin7b4L

【讨论】：

【解决方案2】：

设置cols="X" 将使用Vuetify CSS 类col-X，其定义如下

.col-X {
    flex: 0 0 YY%;
    max-width: YY%;
}

其中 YY 计算为 100/12 * X，其中 X 是传递给 cols 的值。 X 只能是整数，最小值为 1。

这意味着列的最小宽度是 8.33333...%

如果你想要更小（或固定）的东西，你必须使用max-width CSS 属性应用你自己的样式...

【讨论】：