Vue.js/Vuetify：如何让v-card-actions具备响应式特性？

Great question! Let's break down what's causing the responsiveness issues in your code—and fix them step by step:

1. Fix the Syntax Error in v-img #

First, there's a small syntax bug in your v-img binding that might be throwing off rendering:

<v-img :src='teacher.src'" height="260px" ></v-img>

The mismatched closing double quote will cause Vue to throw an error. Correct it to use consistent quotes:

<v-img :src="teacher.src" height="260px"></v-img>

2. Make v-card-actions Responsive on Resize #

The core problem is that v-card-actions doesn't wrap its content by default. When your window shrinks, the two buttons and spacer run out of horizontal space, leading to overflow or misalignment.

To fix this, add the wrap prop to v-card-actions (it enables flex wrapping) and tweak the buttons to adapt better to small screens:

Corrected v-card-actions Section: #

<v-card-actions wrap>
  <v-btn flat small color='indigo darken-4' class="text-no-wrap"> More </v-btn>
  <v-spacer></v-spacer>
  <v-btn flat small color='indigo darken-4' :class="{ 'text-xs-center': $vuetify.breakpoint.xsOnly }"> 
    {{ $vuetify.breakpoint.xsOnly ? 'Schedule' : 'Schedule an Appointment' }}
  </v-btn>
</v-card-actions>

What this does: #

• The wrap prop ensures buttons stack vertically when there's not enough horizontal space, preventing overlap.
• text-no-wrap keeps the "More" button's text intact without wrapping.
• For extra-small screens, we shorten the second button's text to "Schedule" to save space, and center-align it when stacked.

Full Corrected Code Snippet #

Here's your entire component with both fixes applied:

<template>
  <v-container grid-list-lg>
    <v-layout row wrap>
      <v-flex v-for="teacher in teachers" :key="teacher.firstName" md-4 xs-4>
        <v-card flat tile>
          <v-img :src="teacher.src" height="260px"></v-img>
          <v-card-title primary-title class='blue--text'>
            Dr. {{teacher.firstName}} {{teacher.lastName}}, {{teacher.specialty}}
          </v-card-title>
          <v-card-text class='body-1'>
            M.S at {{teacher.ms}} <br> M.S.C at {{teacher.msc}}
          </v-card-text>
          <v-card-actions wrap>
            <v-btn flat small color='indigo darken-4' class="text-no-wrap"> More </v-btn>
            <v-spacer></v-spacer>
            <v-btn flat small color='indigo darken-4' :class="{ 'text-xs-center': $vuetify.breakpoint.xsOnly }"> 
              {{ $vuetify.breakpoint.xsOnly ? 'Schedule' : 'Schedule an Appointment' }}
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      teachers:[
        {firstName:'Jon', lastName:'Doe', specialty:'PE', ms:'University of Georgia', msc:'University of Georgia', src:'https://source.unsplash.com/kmuch3JGPUM'},
        {firstName:'Maria', lastName:'Doe', specialty:'Philology', ms:'University of Atlanta', msc:'University of Atlanta ', src:'https://randomuser.me/api/portraits/women/3.jpg'},
        {firstName:'Jon', lastName:'Jon', specialty:'Mathematics', ms:'University of Michigan', msc:'University of Michigan', src:'https://source.unsplash.com/Jy4ELSGPHTc'},
        {firstName:'Peter', lastName:'Xavier', specialty:'Mathematics', ms:'University of Miami', msc:'University of Miami', src:'https://randomuser.me/api/portraits/men/71.jpg'},
        {firstName:'Peter', lastName:'Miros', specialty:'Mathematics', ms:'University of Miami', msc:'Georgetown University', src:'https://randomuser.me/api/portraits/men/20.jpg'},
      ]
    }
  }
}
</script>

Bonus Alternative: #

If you prefer buttons to stay side-by-side on small screens, use text-truncate on the longer button to add ellipsis for overflow text:

<v-btn flat small color='indigo darken-4' class="text-truncate"> Schedule an Appointment </v-btn>

Wrapping with text adjustment is generally more user-friendly for mobile, though!

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