如何在较大屏幕尺寸时减小Vuetify列宽

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？我知道对于cols属性我不能低于1。你们是怎么处理这事的？

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

Answer 2

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

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

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

这意味着列的最小宽度是8.33333...百分比

如果你想要更小的(或固定的)，你必须应用你自己的样式与max-width CSS属性...