Vuetify css over-ride изменение вида компонента


Vuetify css over-ride изменение вида компонента

30.10.2020 05:49:56 Просмотров 40 Источник

У меня есть компонент для рендеринга некоторых продуктов, как мобильный вид, так и настольный вид имеют разные стили. Я назначаю классы для настольных и мобильных устройств внутри <div> в соответствии с требованием desktop and mobile view div CSS display attribute display:none; и display:block; изменены.

На мобильном представлении я должен отобразить row, а внутри будут отображаться два продукта, поэтому я кодирую его следующим образом:

<!-- MOBILE ONLY PRODUCT DISPLAY COMPONENT-->

    <v-row class="mobile_product_view ">
       <v-col cols="6">aa</v-col>
       <v-col cols="6">bb</v-col>
    </v-row>

/* CSS large mobile size */
@media screen and (min-width: 425px) {
  .mobile_product_view {
    display: block;
  }
}

Вопрос:

Не назначая атрибут class="mobile_product_view " <row>, он визуализирует столбцы так, как я хочу. когда я назначаю атрибут класса, столбцы отображаются один под другим. то, что я хочу, это cols должно быть половиной полного дисплея col - aa and col - bb должно быть место в одной строке

У вопроса есть решение - Посмотреть?

Ответы - Vuetify css over-ride изменение вида компонента / Vuetify css over-ride changing the view of a component

Mohamed Raza

30.10.2020 05:59:40

Я решил эту проблему с помощью следующего кода

<v-card class="mobile_product_view">
  <v-row class="m-0  ">
    <v-col cols="6">aa</v-col>
    <v-col cols="6">bb</v-col>
  </v-row>
</v-card>
Помочь в развитии проекта:
Закрыть X