如何更好地显示卡片中的元素？

Question

我有一个任务，我应该在“卡”中包含信息，该信息应该像我的示例一样显示（图片）

这是我的html

<div id="app">
        <el-card shadow="always">
            Dashboard
        </el-card>

    <el-card class="box-card">
        <div slot="header">
            <h2>Card name</h2>
            <p>Challenge</p>
        </div>
        <div class="text item">

        </div>
    </el-card>
</div>

您能帮我在图片上放置那些“批准的帖子”，“影响力”，“喜欢”，“评论”吗？ 假设我没有那么丰富的经验，我认为我应该使用网格或表格显示... 您能给我展示一些例子还是展示给我看？ 谢谢！ 我正在使用Vue.js和Element UI库

Answer 1

如果您熟悉引导程序，则基本上需要遵循col的要求。所以2个等于col的工作

例如：

<div class="row">
    <div class="col-lg-12">
        <div class="col-lg-6">
            <label>Posts</label>
            <label>545454</label>
        </div>
        <div class="col-lg-6">
            <label>Influencer</label>
            <label>56656</label>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="col-lg-6">
            <label>Likes</label>
            label>545454</label>
        </div>
        <div class="col-lg-6">
            <label>Comments</label>
            <label>56656</label>
        </div>
    </div>
</div>