javascript - 如何对齐不同行中的卡片

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”。