Vuetify css override 改变组件的视图

Posted 2023-02-23

【中文标题】Vuetify css override 改变组件的视图

【英文标题】：Vuetify css over-ride changing the view of a component

【发布时间】：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 应该放在一行中

【参考方案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>