화면 크기를 확대하기 위해 Vuetify 그리드 열 너비를 줄이는 방법

화면 크기를 확대하기 위해 Vuetify 그리드 열 너비를 줄이는 방법

사용하고 있다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소유물.어떻게 대처하고 계셨나요?

사용할 수 있습니다.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

설정cols="X"Vuetify CSS 클래스를 사용합니다.col-X이것은 다음과 같이 정의된다.

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

여기서 YY는 다음과 같이 계산됩니다.100/12 * X여기서 X는 값 페이싱 대상입니다.cols.X정수만 사용할 수 있으며 최소값은 1입니다.

즉, 기둥의 최소 너비는 8.333333입니다.퍼센티

작은 것(또는 고정)을 원하는 경우, 다음과 같이 사용자 고유의 스타일을 적용해야 합니다.max-widthCSS 속성...

언급URL : https://stackoverflow.com/questions/59715200/how-to-reduce-vuetify-grid-column-width-for-bigger-screen-sizes