我正在尝试做这样的事情:https ://nomadlist.com/
3 个元素的行(卡片?)从上到下。大小相同,完美对齐。
我正在使用 Handlebars 和 Bulma CSS,以及卡片组件并这样做:
<div class="columns">
{{#each serverElements}}
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{this.title}}
</p>
<a class="card-header-icon">
<span class="icon">
<i class="fa fa-angle-down"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
{{this.body}}
<a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
<br>
<small>this.createdAt</small>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
</footer>
</div>
</div>
{{/each}}
</div>
它部分有效。每个元素都有自己的卡片。但这会将它们全部打印在同一行上。并且有不同的尺寸。