Vuetify css override 改变组件的视图答案

【问题标题】：Vuetify css over-ride changing the view of a componentVuetify css override 改变组件的视图
【发布时间】：2021-02-13 01:12:54
【问题描述】：

我有一个组件来渲染一些产品，移动视图和桌面视图都有不同的样式。我根据要求桌面和移动视图div的CSS显示属性display:none;和display:block;更改了<div>内的桌面和移动类。

在移动视图上，我必须显示 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 应该放在一行中

【问题讨论】：

标签： css vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

我用下面的代码解决了

<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>

【讨论】：