Question

我有4张卡（第一行3张，第二行1张）。每次我调整浏览器窗口的大小时，我的v-card-actions内容都不响应。在图片中，一切正常：

这是我调整浏览器窗口大小的时候：

最后是我的代码：

.vue

<v-container
        grid-list-lg
    >
        <v-layout
            row
            wrap
        >
            <v-flex
                v-for="teacher in teachers"
                :key="teacher.firstName"
                md-4
                xs4
            >
                <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>

                        <v-btn
                            flat
                            small
                            color='indigo darken-4'
                        >
                            More
                        </v-btn>

                        <v-spacer></v-spacer>

                        <v-btn
                            flat
                            small
                            color='indigo darken-4'
                        >
                            Schedule an Appointment
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>

<script>

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'},
        }
      ]
  }

Answer 1

<v-card-actions>元素确实对浏览器宽度变化做出反应。您看到的是Vuetify <v-button>元素存在问题，因为它（默认情况下）不自动换行以适合文本。

您有几种选择：

为按钮添加自定义CSS，以适应我的喜好和棘手的事情。
为此专门制作自己的按钮元素-似乎有点过头，但是当我也希望按钮能脱颖而出或看起来与Vuetify的标准足够不同时，我就这样做了。
将按钮文本修改为短一些-如果想花哨的话，可以尝试像“预订”或“约会”之类的单词，甚至根据屏幕大小修改文本（或更改为图标）。

我个人建议选项3。

编辑：添加了xs12 sm6 md4的大小调整和一些小的格式更改，以突出显示不同的元素

 <v-container grid-list-lg>
      <v-layout row wrap>
        <v-flex v-for="teacher in teachers" :key="teacher.firstName" xs12 sm6 md4>
          <v-card>
            <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>
              <v-btn outline color='blue'>
                More...
              </v-btn>
              <v-spacer></v-spacer>
              <v-btn outline color='green'>
                Appointments
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>

我已经对此进行了测试，并且没有低于300像素（v卡的最小尺寸）的尺寸，按钮看上去不太好。也为您制作了codepen。

Vue.js / Vuetify：如何使V卡动作具有反应性？

1 个答案: