ハンドルバーを使用して配列を反復するときに応答性の高い Flex プロパティを維持する

Question

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

P粉098417223472日前570

Answer 1

3columnLayout フラグを実装しようとしたときに、なぜブートストラップの使用をやめたのか理解できません。ブートストラップを使用して、各列にクラス col-lg-4 を使用して 3 列のレイアウトを作成します。したがって、各列に必要な条件式は {{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}} となります。

リーリー リーリー リーリー