使用 vuetify 卡，如引导卡列

Posted 2023-02-23

【中文标题】使用 vuetify 卡，如引导卡列

【英文标题】：Using vuetify card like bootstrap cards columns

【发布时间】：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>

【问题讨论】：

尝试并确保为您的问题使用正确的标签，如果您也可以提供代码。

我已提供代码作为答案。请检查一次。

【参考方案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>

【讨论】：

你应该把它放到你的问题中，而不是作为答案。

*** 的自答步骤是这样的。它让我提出一个问题，然后同时添加一个答案。

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