使用vuetify卡，例如引导卡列

Question

我需要一种使用Bootstrap Card Columns之类的Vuetify中v-card列表的方法

可能的解决方案：

对不起，我无法拨出代码:(

这就是我所做的。

更新：不幸的是，这与v-ripple指令搞混了

<template>
<v-container grid-list-md>
    <div class="v-card-columns">
        <v-card tile v-for="post in posts" :key="post.id">
            <v-card-title primary-title>
                <h3 headline>
                    {{post.title}}
                </h3>
            </v-card-title>
            <v-card-text>
                {{post.body}}
            </v-card-text>
        </v-card>
    </div>
</v-container>
</template>
<script>

import axios from "axios";

export default {
    name: "All",
    data() {
        return {
            posts: []
        }
    },
    mounted() {
        axios
            .get('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                this.posts = res.data
            })
    }
}
</script>

<style scoped>
.v-card-columns .v-card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .v-card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1;
    }

    .v-card-columns .v-card {
        display: inline-block;
        width: 100%;
    }
}
</style>

Answer 1

对不起，我无法拨出代码:(

这就是我所做的。

更新：不幸的是，这与v-ripple指令搞混了

<template>
<v-container grid-list-md>
    <div class="v-card-columns">
        <v-card tile v-for="post in posts" :key="post.id">
            <v-card-title primary-title>
                <h3 headline>
                    {{post.title}}
                </h3>
            </v-card-title>
            <v-card-text>
                {{post.body}}
            </v-card-text>
        </v-card>
    </div>
</v-container>
</template>
<script>

import axios from "axios";

export default {
    name: "All",
    data() {
        return {
            posts: []
        }
    },
    mounted() {
        axios
            .get('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                this.posts = res.data
            })
    }
}
</script>

<style scoped>
.v-card-columns .v-card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .v-card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1;
    }

    .v-card-columns .v-card {
        display: inline-block;
        width: 100%;
    }
}
</style>