使用 vuetify 卡，如引导卡列答案

【问题标题】：Using vuetify card like bootstrap cards columns使用 vuetify 卡，如引导卡列
【发布时间】：2019-01-14 16:59:29
【问题描述】：

我需要一种方法来使用来自 Vuetify 的 v-card 列表，例如 Bootstrap Card Columns

可能的解决方案：

原谅我，我不能plunkr代码:(

这就是我所做的。

更新：不幸的是，这与 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>

【问题讨论】：

尝试并确保为您的问题使用正确的标签，如果您也可以提供代码。
我已提供代码作为答案。请检查一次。

标签： vuejs2 bootstrap-4 vue-component vuetify.js

【解决方案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>

【讨论】：

你应该把它放到你的问题中，而不是作为答案。
Stackoverflow 的自答步骤是这样的。它让我提出一个问题，然后同时添加一个答案。
您误会了，让我向您解释一下，您最初发布了一个几乎没有详细信息的问题，要求提供没有代码的答案，人们大概出于这个原因投票反对。您应该更新您的问题以包含代码和/或实际写下为什么这解决了您的问题。因为对我一个可能的其他人来说，这整个问题毫无意义，对未来的任何人都没有帮助。