Question

我要像这样：https://getbootstrap.com/docs/4.0/components/card/#card-groups

所以我希望即使描述有所更改，盒子的高度也保持不变

我的codepen是这样的：

https://codepen.io/positivethinking639/pen/dyyWadg?editors=1010

  <v-container fluid>
    <v-row dense>
      <v-col
        v-for="card in cards"
        :key="card.title"
        :cols="card.flex"
      >
        <v-card>
          <v-img
            :src="card.src"
            class="white--text align-end"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
            height="200px"
          >

          </v-img>
          <v-card-text v-text="card.title"></v-card-text>
          <v-card-actions>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-bookmark</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-share-variant</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

我希望身高卡保持不变，尽管说明有所不同

我该怎么办？

Answer 1

上面的代码看起来不错，只需要向行内的列添加d-flex类，使其高度与其他列相同

可工作的Codepen在这里：https://codepen.io/chansv/pen/ZEEKPaM?editors=1010

已更新：添加了一些修复程序，以在弹性卡增长时将v卡操作移至底部

    <div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-system-bar
        color="indigo darken-2"
        dark
      >
        <v-spacer></v-spacer>

        <v-icon>mdi-window-minimize</v-icon>

        <v-icon>mdi-window-maximize</v-icon>

        <v-icon>mdi-close</v-icon>
      </v-system-bar>

      <v-toolbar
        color="indigo"
        dark
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Discover</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-toolbar>

      <v-container fluid>
        <v-row dense>
          <v-col
            v-for="card in cards"
            :key="card.title"
            :cols="card.flex"
            class="d-flex"
          >
            <v-card class="d-flex flex-column">
              <v-img
                :src="card.src"
                class="white--text align-end"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                height="200px"
              >

              </v-img>
              <v-card-text v-text="card.title"></v-card-text>
              <v-spacer></v-spacer>
              <v-card-actions>

                <v-btn icon>
                  <v-icon>mdi-heart</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-bookmark</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-share-variant</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    cards: [
      { title: 'Pre-fab homes aaaaaaaaaaaaaaaaaa', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
      { title: 'Favorite roaddddddddd', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
      { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
    ],
  }),
})

Answer 2

Vuetify支持flexbox https://vuetifyjs.com/en/styles/flex 因此，您唯一要做的就是将class="d-flex"添加到您的v-col

<v-container fluid>
    <v-row dense>
      <v-col
        v-for="card in cards"
        :key="card.title"
        :cols="card.flex"
        class="d-flex"
      >
        <v-card class="d-flex flex-column">
          <v-img
            :src="card.src"
            class="white--text align-end"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
            height="200px"
          >

          </v-img>
          <v-card-text v-text="card.title" class="flex-grow-1"></v-card-text>
          <v-card-actions>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-bookmark</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-share-variant</v-icon>
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>

为使内容在项目中正确对齐：

将class="d-flex flex-column"添加到v-card
将class="flex-grow-1"添加到您的v-card-text
重写v响应的样式（可能也可以用更好的方法解决此问题）
```
.v-responsive {
  flex: unset;  
}
```

https://codepen.io/reijnemans/pen/WNNjmJd

vuetify上有纸牌页脚/纸牌功能吗？

2 个答案: