1

Пытаюсь задать ширину для v-text-field и она не срабатывает. И не получается разместить этот инпут над карточками, нужно чтоб он был примерно ширинов в 200 пикс. и справа от него не было никаких карточек, чтоб они уже начинались с ряда ниже.

<template>
  <div>
    <v-contaiter class="fill-height">
       <v-row>
        <v-text-field dark label="Добавьте крипту" width="200" persistent-hint
            outlined></v-text-field>
       </v-row>

      <v-row class="mx-4 mt-14 my-auto">
        <v-col cols="3">
          <v-card class="text-center">
            <v-card-text class="pb-0">
              BTC
            </v-card-text>
            <v-card-title class="justify-center pt-1 pb-3">
              Курс крипты
            </v-card-title>
            <v-btn color="red" dark small class="mb-3">
              Удалить
              <v-icon right>mdi-cancel</v-icon>
            </v-btn>
          </v-card>
        </v-col>
        <v-col cols="3">
          <v-card class="text-center">
            <v-card-text class="pb-0">
              BTC
            </v-card-text>
            <v-card-title class="justify-center pt-1 pb-3">
              Курс крипты
            </v-card-title>
            <v-btn color="red" dark small class="mb-3">
              Удалить
              <v-icon right>mdi-cancel</v-icon>
            </v-btn>
          </v-card>
        </v-col>
        <v-col cols="3">
          <v-card class="text-center">
            <v-card-text class="pb-0">
              BTC
            </v-card-text>
            <v-card-title class="justify-center pt-1 pb-3">
              Курс крипты
            </v-card-title>
            <v-btn color="red" dark small class="mb-3">
              Удалить
              <v-icon right>mdi-cancel</v-icon>
            </v-btn>
          </v-card>
        </v-col>
        <v-col cols="3">
          <v-card class="text-center">
            <v-card-text class="pb-0">
              BTC
            </v-card-text>
            <v-card-title class="justify-center pt-1 pb-3">
              Курс крипты
            </v-card-title>
            <v-btn color="red" dark small class="mb-3">
              Удалить
              <v-icon right>mdi-cancel</v-icon>
            </v-btn>
          </v-card>
        </v-col>
        <v-col cols="3">
          <v-card class="text-center">
            <v-card-text class="pb-0">
              BTC
            </v-card-text>
            <v-card-title class="justify-center pt-1 pb-3">
              Курс крипты
            </v-card-title>
            <v-btn color="red" dark small class="mb-3">
              Удалить
              <v-icon right>mdi-cancel</v-icon>
            </v-btn>
          </v-card>
        </v-col>
        <v-col cols="3">
          <v-card class="text-center">
            <v-card-text class="pb-0">
              BTC
            </v-card-text>
            <v-card-title class="justify-center pt-1 pb-3">
              Курс крипты
            </v-card-title>
            <v-btn color="red" dark small class="mb-3">
              Удалить
              <v-icon right>mdi-cancel</v-icon>
            </v-btn>
          </v-card>
        </v-col>
      </v-row>
    </v-contaiter>
  </div>
</template>

введите сюда описание изображения

1 ответ 1

0

попробуйте пожалуйста добавить v-col cols="3" для v-text-field пример ниже

   <template>
   <div>
   <v-contaiter class="fill-height">
    <v-row>
    <v-col
      cols="3"
    >
      <v-text-field></v-text-field>
    </v-col>
  </v-row>

  <v-row class="mx-4 mt-14 my-auto">
    <v-col cols="3">
      <v-card class="text-center">
        <v-card-text class="pb-0">
          BTC
        </v-card-text>
        <v-card-title class="justify-center pt-1 pb-3">
          Курс крипты
        </v-card-title>
        <v-btn color="red" dark small class="mb-3">
          Удалить
          <v-icon right>mdi-cancel</v-icon>
        </v-btn>
      </v-card>
    </v-col>
    <v-col cols="3">
      <v-card class="text-center">
        <v-card-text class="pb-0">
          BTC
        </v-card-text>
        <v-card-title class="justify-center pt-1 pb-3">
          Курс крипты
        </v-card-title>
        <v-btn color="red" dark small class="mb-3">
          Удалить
          <v-icon right>mdi-cancel</v-icon>
        </v-btn>
      </v-card>
    </v-col>
    <v-col cols="3">
      <v-card class="text-center">
        <v-card-text class="pb-0">
          BTC
        </v-card-text>
        <v-card-title class="justify-center pt-1 pb-3">
          Курс крипты
        </v-card-title>
        <v-btn color="red" dark small class="mb-3">
          Удалить
          <v-icon right>mdi-cancel</v-icon>
        </v-btn>
      </v-card>
    </v-col>
    <v-col cols="3">
      <v-card class="text-center">
        <v-card-text class="pb-0">
          BTC
        </v-card-text>
        <v-card-title class="justify-center pt-1 pb-3">
          Курс крипты
        </v-card-title>
        <v-btn color="red" dark small class="mb-3">
          Удалить
          <v-icon right>mdi-cancel</v-icon>
        </v-btn>
      </v-card>
    </v-col>
    <v-col cols="3">
      <v-card class="text-center">
        <v-card-text class="pb-0">
          BTC
        </v-card-text>
        <v-card-title class="justify-center pt-1 pb-3">
          Курс крипты
        </v-card-title>
        <v-btn color="red" dark small class="mb-3">
          Удалить
          <v-icon right>mdi-cancel</v-icon>
        </v-btn>
      </v-card>
    </v-col>
    <v-col cols="3">
      <v-card class="text-center">
        <v-card-text class="pb-0">
          BTC
        </v-card-text>
        <v-card-title class="justify-center pt-1 pb-3">
          Курс крипты
        </v-card-title>
        <v-btn color="red" dark small class="mb-3">
          Удалить
          <v-icon right>mdi-cancel</v-icon>
        </v-btn>
      </v-card>
    </v-col>
  </v-row>
</v-contaiter>
</div>
</template>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.