css - 如何为更大的屏幕尺寸减少 Vuetify Grid 列宽

Question

我正在使用 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宽度超过要求？我知道我不能少于 1为 cols属性(property)。你们是怎么处理的？

Answer 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