私はこのような何かをしようとしている

Question

異なる行にカードを揃える方法：上から下に行く3つの要素（？カード）のhttps://nomadlist.com/

行。同じサイズ、完璧に整列。私はハンドルバーとブルマ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 'を使用します。