<p>次のコードがあります (Handlebars を使用し、JSFiddle からの動作コード): </p>
<pre class="brush:php;toolbar:false;"><div class="cards-container">
{{#それぞれの this.cards}}
<div class="イメージカード">
<div class="画像コンテンツ">
<p class="title">{{title}}</p>
</div>
</div>
</div>
{{/それぞれ}}
</div></pre>
<pre class="brush:php;toolbar:false;">{
"3columnLayout": false、
「カード」: [
{
「タイトル」：「カード１」
}、
{
「タイトル」：「カード２」
}、
{
「タイトル」：「カード３」
}
】
}</pre>
<p>基本的に、カードの配列をループし、アイテムごとに <code>card-container</code> div を作成します。次に、ブートストラップを使用して CSS クラスを各 div に割り当てます (例: <code>col-md-6</code>)。
<li>モバイル: アイテムは 1 列に表示されます</li>
<li>タブレット: アイテムは 2 列に表示されます</li>
<li>デスクトップ: アイテムは 3 列に表示されます</li>
</ul>
<p>これはすべて期待どおりに動作し、(カードの数に関係なく) 望ましい UI が視覚的に得られます。以下の例: </p>
<p>ただし、JSON に示されているように、デスクトップを 4 列レイアウトから 3 列レイアウトに変更するかどうかを決定するには、個々のカード レベルの外側にプロパティが必要です。 </p>
<p>カード配列内のすべてのカードに対してこのプロパティを繰り返したくなかったので、コード スニペット (ハンドルバーを使用) に示すようにコードを再編成しました。 https://jsfiddle.net/stcfa5wh/20/< ; /p >
<p>ただし、これは、<code>3columnLayout</code> 値にはアクセスできますが、HTML がページにダンプされ、<code>col</code> を使用できなくなったことを意味します。私のやり方;前に完了しました。 </p>
<p>たとえば、タブレットでは、各 <code>image-card</code> の幅を 50% に設定できますが、行の必要性は無視されます。 </p>
<p>トップレベルの属性 (例: <code>3columnLayout</code>) を実装しながら、HTML の構造を保持する方法を提案できる人はいますか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
3columnLayoutフラグを実装しようとしたときに、なぜブートストラップの使用をやめたのか理解できません。ブートストラップを使用して、各列にクラスcol-lg-4を使用して 3 列のレイアウトを作成します。したがって、各列に必要な条件式は{{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}}となります。