如何对齐不同行中的卡片

Question

我正在尝试这样做：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>

部分有效。每个元素都有自己的卡片。但是这会将它们全部打印在同一行上。并且有不同的尺寸。

Answer 1

如果我理解你的话，你可以使用正确列的is-multiline修饰符，如果你想要连续3行，那么使用`column is-4'。