如何为更大的屏幕尺寸减少 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>

这在较小的屏幕上看起来不错。但是当我们使用 1100 像素以上的屏幕尺寸时，甚至cols="1"会变得太宽，并在图标列和回复列之间产生大量空间，如下图所示

如何解决v-col宽度超过要求的问题？我知道我不能去不到1的cols财产。你们是怎么处理的？

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