如何更好地显示卡片内的元素？答案

【问题标题】：How to better display elements inside card?如何更好地显示卡片内的元素？
【发布时间】：2019-04-06 15:44:08
【问题描述】：

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

这是我的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>

你能帮我把那些“批准的帖子”、“影响”、“喜欢”、“cmets”喜欢放在图片上吗？假设我没有这么大的经验，我认为我应该使用网格或表格显示... 你能给我看一些例子吗？或者在我的例子中展示它怎么可能？谢谢！我正在使用 Vue.js 和 Element UI 库

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

标签： html css vue.js html-table grid

【解决方案1】：

如果您熟悉引导程序，基本上您需要遵循 col's。所以 2 equal 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>

【讨论】：