Display

■Display Property

<v-row no-gutters>
    <v-col>
      <span
        class="pa-3 pl-1"
        text-color="black"
        style="display:inline-block; font-size:18px; font-weight:bold"
      >
        {{ $t("Uopload Resume") }}
      </span>
      <v-file-input
        placeholder="No file chosen"
        accept="image/*,.pdf,.doc,.txt"
        outlined
        dense
        hide-details
        ref="imageFile"
        v-model="imageFile"
        @change="handleImageUpload()"
        class="d-inline-block"
        color="white"
        dark
        prepend-icon=""
        style="font-size:18px;font-color:#ffffff;background-color:#fd7300;"
      >
        <template v-slot:append>
          <v-progress-circular
            v-if="isProgress"
            indeterminate
            size="25"
            color="white"
          ></v-progress-circular>
        </template>
      </v-file-input>
    </v-col>
  </v-row>

파일을 첨부할 수 있는 v-file-input 태그이다.

이는 다음과 같은 레이아웃을 가진다

 

다음과 같이 부트스트랩의 inline-block 속성을 추가한다면

    <v-file-input class="d-inline-block"></v-file-input>

다음과 같이 사용하는 공간 만큼 크기가 줄어들게 된다.

 

 

getbootstrap.com/docs/4.0/utilities/display/

Display property