Vuetify自定义CSS覆盖致v-row列布局异常问题咨询

Hey there! I see the issue you're running into—adding the mobile_product_view class to your <v-row> is making your <v-col> elements stack vertically instead of sitting side-by-side like they should. Let's break down why this is happening and how to fix it.

The Root Cause #

Vuetify's <v-row> component relies on flexbox layout (it has display: flex by default) to make columns align horizontally. When you set .mobile_product_view { display: block; } in your CSS, you're overriding that flex behavior. Block-level elements automatically take up the full width of their container, which forces your <v-col>s to stack on top of each other.

The Fix #

Instead of changing the display property to block, keep the flex layout intact and use media queries to toggle visibility. Here's the adjusted code:

Updated HTML

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

Updated CSS

/* Hide mobile view by default (for desktop) */
.mobile_product_view {
  display: none;
}

/* Show mobile view on screens 425px and smaller, keep flex layout */
@media screen and (max-width: 425px) {
  .mobile_product_view {
    display: flex; /* Preserve Vuetify's flex layout for columns */
  }
}

Why This Works #

• We start by hiding the mobile view for all screen sizes.
• For screens 425px or smaller (your target mobile size), we set display: flex instead of block—this keeps the <v-row>'s native flex behavior, so your <v-col cols="6"> elements will each take up half the width and stay aligned horizontally.

Quick Troubleshooting Tip #

If you still see issues, open your browser's developer tools (F12) and inspect the <v-row> element. Check if any other CSS rules are overriding the display: flex property—you might need to adjust your selector specificity if there's a conflict.

内容的提问来源于stack exchange，提问作者raza9798