Как уменьшить ширину столбца 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>

На маленьких экранах это выглядит хорошо. Но поскольку мы go на экранах размером более 1100 пикселей, даже cols="1" становится слишком широким и создает много места между столбцом значков и столбцом ответа, как показано на рисунках ниже

Как исправить v-col, имеющий большую ширину, чем требуется? Я знаю, что не могу go меньше 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

Answer 2

Настройка cols="X" будет использовать Vuetify CSS class col-X, который определен как

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

, где YY вычисляется как 100/12 * X, где X - значение, установленное в cols. X может быть только целым числом, а минимальное - 1.

Это означает, что минимальная ширина столбца составляет 8,33333 ... процентов

Если вы хотите что-то меньшее (или фиксированное), вы должны применить свой собственный стиль с атрибутом max-width CSS ...