Javascript 如何对齐不同行中的卡

我正在尝试这样做：

从上到下由3个元素（卡片？）组成的行。同样大小，完全对齐

我正在使用把手和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>

{{{#每个服务器元素}

{{this.title}}

{{this.body}}
@布尔马约#css#响应迅速


这是createdAt
拯救
编辑
删除
{{/每个}}

---

而且部分有效。每个元素都有自己的卡。但这把它们都打印在同一行上。和不同的大小。

如果我理解正确，您应该使用带有右列的

is multiline

修饰符，如果您希望一行中有3个，然后使用'column is-4'。

我看不到在HTML中创建任何行。请尝试为您的卡片元素提供display:inline块。我认为您引用的网站没有任何魔力。每个项目的宽度为33.3%，高度固定。SO在这里帮助您编写标记，但SO不在这里为您编写标记。HTML并不是我们需要从您那里看到的一切。